Update dependency react-router-dom to v7.13.1

.drone.yml

@@ -19,6 +19,13 @@ steps:
           - corepack prepare yarn@1.22.22 --activate
           - yarn install --frozen-lockfile
 
+    - name: lint
+      image: node:22
+      commands:
+          - corepack enable
+          - corepack prepare yarn@1.22.22 --activate
+          - yarn lint
+
     - name: build
       image: node:22
       commands:

.gitignore

@@ -5,6 +5,7 @@ node_modules/
 dist/
 build/
 coverage/
+storybook-static/
 
 # Vite / tooling caches
 .vite/

.prettierignore

@@ -0,0 +1,5 @@
+dist
+coverage
+storybook-static
+node_modules
+yarn.lock

.prettierrc

@@ -0,0 +1,7 @@
+{
+    "$schema": "https://json.schemastore.org/prettierrc",
+    "singleQuote": true,
+    "semi": true,
+    "printWidth": 100,
+    "tabWidth": 4
+}

.storybook/main.ts

@@ -0,0 +1,15 @@
+import type { StorybookConfig } from '@storybook/react-vite';
+
+const config: StorybookConfig = {
+    stories: ['../src/**/*.stories.@(ts|tsx|mdx)'],
+    addons: ['@storybook/addon-docs', '@storybook/addon-a11y', '@storybook/addon-themes'],
+    framework: {
+        name: '@storybook/react-vite',
+        options: {},
+    },
+    docs: {
+        autodocs: 'tag',
+    },
+};
+
+export default config;

.storybook/preview.css

@@ -0,0 +1,8 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+body {
+    background-color: var(--bg-page);
+    color: var(--text-primary);
+}

.storybook/preview.tsx

@@ -0,0 +1,27 @@
+import type { Preview } from '@storybook/react';
+import { MemoryRouter } from 'react-router-dom';
+import '@mdxeditor/editor/style.css';
+import './preview.css';
+import '../src/styles/base.css';
+import '../src/styles/components.css';
+
+const preview: Preview = {
+    decorators: [
+        (Story) => (
+            <MemoryRouter>
+                <Story />
+            </MemoryRouter>
+        ),
+    ],
+    parameters: {
+        controls: {
+            matchers: {
+                color: /(background|color)$/i,
+                date: /Date$/i,
+            },
+        },
+        layout: 'centered',
+    },
+};
+
+export default preview;

eslint.config.mjs

@@ -0,0 +1,48 @@
+import js from '@eslint/js';
+import reactHooks from 'eslint-plugin-react-hooks';
+import reactRefresh from 'eslint-plugin-react-refresh';
+import globals from 'globals';
+import tseslint from 'typescript-eslint';
+
+export default tseslint.config(
+    {
+        ignores: [
+            'dist',
+            'coverage',
+            'storybook-static',
+            'node_modules',
+            '*.config.cjs',
+            'vite.config.js',
+            'vite.config.d.ts',
+            'tailwind-preset.cjs',
+        ],
+    },
+    js.configs.recommended,
+    ...tseslint.configs.recommended,
+    {
+        files: ['**/*.{ts,tsx}'],
+        languageOptions: {
+            ecmaVersion: 'latest',
+            sourceType: 'module',
+            globals: {
+                ...globals.browser,
+                ...globals.node,
+            },
+        },
+        rules: {
+            'no-empty': ['error', { allowEmptyCatch: true }],
+        },
+    },
+    {
+        files: ['src/**/*.{ts,tsx}'],
+        ignores: ['src/**/*.stories.ts', 'src/**/*.stories.tsx'],
+        plugins: {
+            'react-hooks': reactHooks,
+            'react-refresh': reactRefresh,
+        },
+        rules: {
+            ...reactHooks.configs.recommended.rules,
+            'react-refresh/only-export-components': ['warn', { allowConstantExport: true }],
+        },
+    },
+);

license.md

@@ -0,0 +1,650 @@
+# GNU Affero General Public License
+
+_Version 3, 19 November 2007_
+_Copyright © 2007 Free Software Foundation, Inc. &lt;<http://fsf.org/>&gt;_
+
+Everyone is permitted to copy and distribute verbatim copies
+of this license document, but changing it is not allowed.
+
+## Preamble
+
+The GNU Affero General Public License is a free, copyleft license for
+software and other kinds of works, specifically designed to ensure
+cooperation with the community in the case of network server software.
+
+The licenses for most software and other practical works are designed
+to take away your freedom to share and change the works. By contrast,
+our General Public Licenses are intended to guarantee your freedom to
+share and change all versions of a program--to make sure it remains free
+software for all its users.
+
+When we speak of free software, we are referring to freedom, not
+price. Our General Public Licenses are designed to make sure that you
+have the freedom to distribute copies of free software (and charge for
+them if you wish), that you receive source code or can get it if you
+want it, that you can change the software or use pieces of it in new
+free programs, and that you know you can do these things.
+
+Developers that use our General Public Licenses protect your rights
+with two steps: **(1)** assert copyright on the software, and **(2)** offer
+you this License which gives you legal permission to copy, distribute
+and/or modify the software.
+
+A secondary benefit of defending all users' freedom is that
+improvements made in alternate versions of the program, if they
+receive widespread use, become available for other developers to
+incorporate. Many developers of free software are heartened and
+encouraged by the resulting cooperation. However, in the case of
+software used on network servers, this result may fail to come about.
+The GNU General Public License permits making a modified version and
+letting the public access it on a server without ever releasing its
+source code to the public.
+
+The GNU Affero General Public License is designed specifically to
+ensure that, in such cases, the modified source code becomes available
+to the community. It requires the operator of a network server to
+provide the source code of the modified version running there to the
+users of that server. Therefore, public use of a modified version, on
+a publicly accessible server, gives the public access to the source
+code of the modified version.
+
+An older license, called the Affero General Public License and
+published by Affero, was designed to accomplish similar goals. This is
+a different license, not a version of the Affero GPL, but Affero has
+released a new version of the Affero GPL which permits relicensing under
+this license.
+
+The precise terms and conditions for copying, distribution and
+modification follow.
+
+## TERMS AND CONDITIONS
+
+### 0. Definitions
+
+“This License” refers to version 3 of the GNU Affero General Public License.
+
+“Copyright” also means copyright-like laws that apply to other kinds of
+works, such as semiconductor masks.
+
+“The Program” refers to any copyrightable work licensed under this
+License. Each licensee is addressed as “you”. “Licensees” and
+“recipients” may be individuals or organizations.
+
+To “modify” a work means to copy from or adapt all or part of the work
+in a fashion requiring copyright permission, other than the making of an
+exact copy. The resulting work is called a “modified version” of the
+earlier work or a work “based on” the earlier work.
+
+A “covered work” means either the unmodified Program or a work based
+on the Program.
+
+To “propagate” a work means to do anything with it that, without
+permission, would make you directly or secondarily liable for
+infringement under applicable copyright law, except executing it on a
+computer or modifying a private copy. Propagation includes copying,
+distribution (with or without modification), making available to the
+public, and in some countries other activities as well.
+
+To “convey” a work means any kind of propagation that enables other
+parties to make or receive copies. Mere interaction with a user through
+a computer network, with no transfer of a copy, is not conveying.
+
+An interactive user interface displays “Appropriate Legal Notices”
+to the extent that it includes a convenient and prominently visible
+feature that **(1)** displays an appropriate copyright notice, and **(2)**
+tells the user that there is no warranty for the work (except to the
+extent that warranties are provided), that licensees may convey the
+work under this License, and how to view a copy of this License. If
+the interface presents a list of user commands or options, such as a
+menu, a prominent item in the list meets this criterion.
+
+### 1. Source Code
+
+The “source code” for a work means the preferred form of the work
+for making modifications to it. “Object code” means any non-source
+form of a work.
+
+A “Standard Interface” means an interface that either is an official
+standard defined by a recognized standards body, or, in the case of
+interfaces specified for a particular programming language, one that
+is widely used among developers working in that language.
+
+The “System Libraries” of an executable work include anything, other
+than the work as a whole, that **(a)** is included in the normal form of
+packaging a Major Component, but which is not part of that Major
+Component, and **(b)** serves only to enable use of the work with that
+Major Component, or to implement a Standard Interface for which an
+implementation is available to the public in source code form. A
+“Major Component”, in this context, means a major essential component
+(kernel, window system, and so on) of the specific operating system
+(if any) on which the executable work runs, or a compiler used to
+produce the work, or an object code interpreter used to run it.
+
+The “Corresponding Source” for a work in object code form means all
+the source code needed to generate, install, and (for an executable
+work) run the object code and to modify the work, including scripts to
+control those activities. However, it does not include the work's
+System Libraries, or general-purpose tools or generally available free
+programs which are used unmodified in performing those activities but
+which are not part of the work. For example, Corresponding Source
+includes interface definition files associated with source files for
+the work, and the source code for shared libraries and dynamically
+linked subprograms that the work is specifically designed to require,
+such as by intimate data communication or control flow between those
+subprograms and other parts of the work.
+
+The Corresponding Source need not include anything that users
+can regenerate automatically from other parts of the Corresponding
+Source.
+
+The Corresponding Source for a work in source code form is that
+same work.
+
+### 2. Basic Permissions
+
+All rights granted under this License are granted for the term of
+copyright on the Program, and are irrevocable provided the stated
+conditions are met. This License explicitly affirms your unlimited
+permission to run the unmodified Program. The output from running a
+covered work is covered by this License only if the output, given its
+content, constitutes a covered work. This License acknowledges your
+rights of fair use or other equivalent, as provided by copyright law.
+
+You may make, run and propagate covered works that you do not
+convey, without conditions so long as your license otherwise remains
+in force. You may convey covered works to others for the sole purpose
+of having them make modifications exclusively for you, or provide you
+with facilities for running those works, provided that you comply with
+the terms of this License in conveying all material for which you do
+not control copyright. Those thus making or running the covered works
+for you must do so exclusively on your behalf, under your direction
+and control, on terms that prohibit them from making any copies of
+your copyrighted material outside their relationship with you.
+
+Conveying under any other circumstances is permitted solely under
+the conditions stated below. Sublicensing is not allowed; section 10
+makes it unnecessary.
+
+### 3. Protecting Users' Legal Rights From Anti-Circumvention Law
+
+No covered work shall be deemed part of an effective technological
+measure under any applicable law fulfilling obligations under article
+11 of the WIPO copyright treaty adopted on 20 December 1996, or
+similar laws prohibiting or restricting circumvention of such
+measures.
+
+When you convey a covered work, you waive any legal power to forbid
+circumvention of technological measures to the extent such circumvention
+is effected by exercising rights under this License with respect to
+the covered work, and you disclaim any intention to limit operation or
+modification of the work as a means of enforcing, against the work's
+users, your or third parties' legal rights to forbid circumvention of
+technological measures.
+
+### 4. Conveying Verbatim Copies
+
+You may convey verbatim copies of the Program's source code as you
+receive it, in any medium, provided that you conspicuously and
+appropriately publish on each copy an appropriate copyright notice;
+keep intact all notices stating that this License and any
+non-permissive terms added in accord with section 7 apply to the code;
+keep intact all notices of the absence of any warranty; and give all
+recipients a copy of this License along with the Program.
+
+You may charge any price or no price for each copy that you convey,
+and you may offer support or warranty protection for a fee.
+
+### 5. Conveying Modified Source Versions
+
+You may convey a work based on the Program, or the modifications to
+produce it from the Program, in the form of source code under the
+terms of section 4, provided that you also meet all of these conditions:
+
+- **a)** The work must carry prominent notices stating that you modified
+  it, and giving a relevant date.
+- **b)** The work must carry prominent notices stating that it is
+  released under this License and any conditions added under section 7.
+  This requirement modifies the requirement in section 4 to
+  “keep intact all notices”.
+- **c)** You must license the entire work, as a whole, under this
+  License to anyone who comes into possession of a copy. This
+  License will therefore apply, along with any applicable section 7
+  additional terms, to the whole of the work, and all its parts,
+  regardless of how they are packaged. This License gives no
+  permission to license the work in any other way, but it does not
+  invalidate such permission if you have separately received it.
+- **d)** If the work has interactive user interfaces, each must display
+  Appropriate Legal Notices; however, if the Program has interactive
+  interfaces that do not display Appropriate Legal Notices, your
+  work need not make them do so.
+
+A compilation of a covered work with other separate and independent
+works, which are not by their nature extensions of the covered work,
+and which are not combined with it such as to form a larger program,
+in or on a volume of a storage or distribution medium, is called an
+“aggregate” if the compilation and its resulting copyright are not
+used to limit the access or legal rights of the compilation's users
+beyond what the individual works permit. Inclusion of a covered work
+in an aggregate does not cause this License to apply to the other
+parts of the aggregate.
+
+### 6. Conveying Non-Source Forms
+
+You may convey a covered work in object code form under the terms
+of sections 4 and 5, provided that you also convey the
+machine-readable Corresponding Source under the terms of this License,
+in one of these ways:
+
+- **a)** Convey the object code in, or embodied in, a physical product
+  (including a physical distribution medium), accompanied by the
+  Corresponding Source fixed on a durable physical medium
+  customarily used for software interchange.
+- **b)** Convey the object code in, or embodied in, a physical product
+  (including a physical distribution medium), accompanied by a
+  written offer, valid for at least three years and valid for as
+  long as you offer spare parts or customer support for that product
+  model, to give anyone who possesses the object code either **(1)** a
+  copy of the Corresponding Source for all the software in the
+  product that is covered by this License, on a durable physical
+  medium customarily used for software interchange, for a price no
+  more than your reasonable cost of physically performing this
+  conveying of source, or **(2)** access to copy the
+  Corresponding Source from a network server at no charge.
+- **c)** Convey individual copies of the object code with a copy of the
+  written offer to provide the Corresponding Source. This
+  alternative is allowed only occasionally and noncommercially, and
+  only if you received the object code with such an offer, in accord
+  with subsection 6b.
+- **d)** Convey the object code by offering access from a designated
+  place (gratis or for a charge), and offer equivalent access to the
+  Corresponding Source in the same way through the same place at no
+  further charge. You need not require recipients to copy the
+  Corresponding Source along with the object code. If the place to
+  copy the object code is a network server, the Corresponding Source
+  may be on a different server (operated by you or a third party)
+  that supports equivalent copying facilities, provided you maintain
+  clear directions next to the object code saying where to find the
+  Corresponding Source. Regardless of what server hosts the
+  Corresponding Source, you remain obligated to ensure that it is
+  available for as long as needed to satisfy these requirements.
+- **e)** Convey the object code using peer-to-peer transmission, provided
+  you inform other peers where the object code and Corresponding
+  Source of the work are being offered to the general public at no
+  charge under subsection 6d.
+
+A separable portion of the object code, whose source code is excluded
+from the Corresponding Source as a System Library, need not be
+included in conveying the object code work.
+
+A “User Product” is either **(1)** a “consumer product”, which means any
+tangible personal property which is normally used for personal, family,
+or household purposes, or **(2)** anything designed or sold for incorporation
+into a dwelling. In determining whether a product is a consumer product,
+doubtful cases shall be resolved in favor of coverage. For a particular
+product received by a particular user, “normally used” refers to a
+typical or common use of that class of product, regardless of the status
+of the particular user or of the way in which the particular user
+actually uses, or expects or is expected to use, the product. A product
+is a consumer product regardless of whether the product has substantial
+commercial, industrial or non-consumer uses, unless such uses represent
+the only significant mode of use of the product.
+
+“Installation Information” for a User Product means any methods,
+procedures, authorization keys, or other information required to install
+and execute modified versions of a covered work in that User Product from
+a modified version of its Corresponding Source. The information must
+suffice to ensure that the continued functioning of the modified object
+code is in no case prevented or interfered with solely because
+modification has been made.
+
+If you convey an object code work under this section in, or with, or
+specifically for use in, a User Product, and the conveying occurs as
+part of a transaction in which the right of possession and use of the
+User Product is transferred to the recipient in perpetuity or for a
+fixed term (regardless of how the transaction is characterized), the
+Corresponding Source conveyed under this section must be accompanied
+by the Installation Information. But this requirement does not apply
+if neither you nor any third party retains the ability to install
+modified object code on the User Product (for example, the work has
+been installed in ROM).
+
+The requirement to provide Installation Information does not include a
+requirement to continue to provide support service, warranty, or updates
+for a work that has been modified or installed by the recipient, or for
+the User Product in which it has been modified or installed. Access to a
+network may be denied when the modification itself materially and
+adversely affects the operation of the network or violates the rules and
+protocols for communication across the network.
+
+Corresponding Source conveyed, and Installation Information provided,
+in accord with this section must be in a format that is publicly
+documented (and with an implementation available to the public in
+source code form), and must require no special password or key for
+unpacking, reading or copying.
+
+### 7. Additional Terms
+
+“Additional permissions” are terms that supplement the terms of this
+License by making exceptions from one or more of its conditions.
+Additional permissions that are applicable to the entire Program shall
+be treated as though they were included in this License, to the extent
+that they are valid under applicable law. If additional permissions
+apply only to part of the Program, that part may be used separately
+under those permissions, but the entire Program remains governed by
+this License without regard to the additional permissions.
+
+When you convey a copy of a covered work, you may at your option
+remove any additional permissions from that copy, or from any part of
+it. (Additional permissions may be written to require their own
+removal in certain cases when you modify the work.) You may place
+additional permissions on material, added by you to a covered work,
+for which you have or can give appropriate copyright permission.
+
+Notwithstanding any other provision of this License, for material you
+add to a covered work, you may (if authorized by the copyright holders of
+that material) supplement the terms of this License with terms:
+
+- **a)** Disclaiming warranty or limiting liability differently from the
+  terms of sections 15 and 16 of this License; or
+- **b)** Requiring preservation of specified reasonable legal notices or
+  author attributions in that material or in the Appropriate Legal
+  Notices displayed by works containing it; or
+- **c)** Prohibiting misrepresentation of the origin of that material, or
+  requiring that modified versions of such material be marked in
+  reasonable ways as different from the original version; or
+- **d)** Limiting the use for publicity purposes of names of licensors or
+  authors of the material; or
+- **e)** Declining to grant rights under trademark law for use of some
+  trade names, trademarks, or service marks; or
+- **f)** Requiring indemnification of licensors and authors of that
+  material by anyone who conveys the material (or modified versions of
+  it) with contractual assumptions of liability to the recipient, for
+  any liability that these contractual assumptions directly impose on
+  those licensors and authors.
+
+All other non-permissive additional terms are considered “further
+restrictions” within the meaning of section 10. If the Program as you
+received it, or any part of it, contains a notice stating that it is
+governed by this License along with a term that is a further
+restriction, you may remove that term. If a license document contains
+a further restriction but permits relicensing or conveying under this
+License, you may add to a covered work material governed by the terms
+of that license document, provided that the further restriction does
+not survive such relicensing or conveying.
+
+If you add terms to a covered work in accord with this section, you
+must place, in the relevant source files, a statement of the
+additional terms that apply to those files, or a notice indicating
+where to find the applicable terms.
+
+Additional terms, permissive or non-permissive, may be stated in the
+form of a separately written license, or stated as exceptions;
+the above requirements apply either way.
+
+### 8. Termination
+
+You may not propagate or modify a covered work except as expressly
+provided under this License. Any attempt otherwise to propagate or
+modify it is void, and will automatically terminate your rights under
+this License (including any patent licenses granted under the third
+paragraph of section 11).
+
+However, if you cease all violation of this License, then your
+license from a particular copyright holder is reinstated **(a)**
+provisionally, unless and until the copyright holder explicitly and
+finally terminates your license, and **(b)** permanently, if the copyright
+holder fails to notify you of the violation by some reasonable means
+prior to 60 days after the cessation.
+
+Moreover, your license from a particular copyright holder is
+reinstated permanently if the copyright holder notifies you of the
+violation by some reasonable means, this is the first time you have
+received notice of violation of this License (for any work) from that
+copyright holder, and you cure the violation prior to 30 days after
+your receipt of the notice.
+
+Termination of your rights under this section does not terminate the
+licenses of parties who have received copies or rights from you under
+this License. If your rights have been terminated and not permanently
+reinstated, you do not qualify to receive new licenses for the same
+material under section 10.
+
+### 9. Acceptance Not Required for Having Copies
+
+You are not required to accept this License in order to receive or
+run a copy of the Program. Ancillary propagation of a covered work
+occurring solely as a consequence of using peer-to-peer transmission
+to receive a copy likewise does not require acceptance. However,
+nothing other than this License grants you permission to propagate or
+modify any covered work. These actions infringe copyright if you do
+not accept this License. Therefore, by modifying or propagating a
+covered work, you indicate your acceptance of this License to do so.
+
+### 10. Automatic Licensing of Downstream Recipients
+
+Each time you convey a covered work, the recipient automatically
+receives a license from the original licensors, to run, modify and
+propagate that work, subject to this License. You are not responsible
+for enforcing compliance by third parties with this License.
+
+An “entity transaction” is a transaction transferring control of an
+organization, or substantially all assets of one, or subdividing an
+organization, or merging organizations. If propagation of a covered
+work results from an entity transaction, each party to that
+transaction who receives a copy of the work also receives whatever
+licenses to the work the party's predecessor in interest had or could
+give under the previous paragraph, plus a right to possession of the
+Corresponding Source of the work from the predecessor in interest, if
+the predecessor has it or can get it with reasonable efforts.
+
+You may not impose any further restrictions on the exercise of the
+rights granted or affirmed under this License. For example, you may
+not impose a license fee, royalty, or other charge for exercise of
+rights granted under this License, and you may not initiate litigation
+(including a cross-claim or counterclaim in a lawsuit) alleging that
+any patent claim is infringed by making, using, selling, offering for
+sale, or importing the Program or any portion of it.
+
+### 11. Patents
+
+A “contributor” is a copyright holder who authorizes use under this
+License of the Program or a work on which the Program is based. The
+work thus licensed is called the contributor's “contributor version”.
+
+A contributor's “essential patent claims” are all patent claims
+owned or controlled by the contributor, whether already acquired or
+hereafter acquired, that would be infringed by some manner, permitted
+by this License, of making, using, or selling its contributor version,
+but do not include claims that would be infringed only as a
+consequence of further modification of the contributor version. For
+purposes of this definition, “control” includes the right to grant
+patent sublicenses in a manner consistent with the requirements of
+this License.
+
+Each contributor grants you a non-exclusive, worldwide, royalty-free
+patent license under the contributor's essential patent claims, to
+make, use, sell, offer for sale, import and otherwise run, modify and
+propagate the contents of its contributor version.
+
+In the following three paragraphs, a “patent license” is any express
+agreement or commitment, however denominated, not to enforce a patent
+(such as an express permission to practice a patent or covenant not to
+sue for patent infringement). To “grant” such a patent license to a
+party means to make such an agreement or commitment not to enforce a
+patent against the party.
+
+If you convey a covered work, knowingly relying on a patent license,
+and the Corresponding Source of the work is not available for anyone
+to copy, free of charge and under the terms of this License, through a
+publicly available network server or other readily accessible means,
+then you must either **(1)** cause the Corresponding Source to be so
+available, or **(2)** arrange to deprive yourself of the benefit of the
+patent license for this particular work, or **(3)** arrange, in a manner
+consistent with the requirements of this License, to extend the patent
+license to downstream recipients. “Knowingly relying” means you have
+actual knowledge that, but for the patent license, your conveying the
+covered work in a country, or your recipient's use of the covered work
+in a country, would infringe one or more identifiable patents in that
+country that you have reason to believe are valid.
+
+If, pursuant to or in connection with a single transaction or
+arrangement, you convey, or propagate by procuring conveyance of, a
+covered work, and grant a patent license to some of the parties
+receiving the covered work authorizing them to use, propagate, modify
+or convey a specific copy of the covered work, then the patent license
+you grant is automatically extended to all recipients of the covered
+work and works based on it.
+
+A patent license is “discriminatory” if it does not include within
+the scope of its coverage, prohibits the exercise of, or is
+conditioned on the non-exercise of one or more of the rights that are
+specifically granted under this License. You may not convey a covered
+work if you are a party to an arrangement with a third party that is
+in the business of distributing software, under which you make payment
+to the third party based on the extent of your activity of conveying
+the work, and under which the third party grants, to any of the
+parties who would receive the covered work from you, a discriminatory
+patent license **(a)** in connection with copies of the covered work
+conveyed by you (or copies made from those copies), or **(b)** primarily
+for and in connection with specific products or compilations that
+contain the covered work, unless you entered into that arrangement,
+or that patent license was granted, prior to 28 March 2007.
+
+Nothing in this License shall be construed as excluding or limiting
+any implied license or other defenses to infringement that may
+otherwise be available to you under applicable patent law.
+
+### 12. No Surrender of Others' Freedom
+
+If conditions are imposed on you (whether by court order, agreement or
+otherwise) that contradict the conditions of this License, they do not
+excuse you from the conditions of this License. If you cannot convey a
+covered work so as to satisfy simultaneously your obligations under this
+License and any other pertinent obligations, then as a consequence you may
+not convey it at all. For example, if you agree to terms that obligate you
+to collect a royalty for further conveying from those to whom you convey
+the Program, the only way you could satisfy both those terms and this
+License would be to refrain entirely from conveying the Program.
+
+### 13. Remote Network Interaction; Use with the GNU General Public License
+
+Notwithstanding any other provision of this License, if you modify the
+Program, your modified version must prominently offer all users
+interacting with it remotely through a computer network (if your version
+supports such interaction) an opportunity to receive the Corresponding
+Source of your version by providing access to the Corresponding Source
+from a network server at no charge, through some standard or customary
+means of facilitating copying of software. This Corresponding Source
+shall include the Corresponding Source for any work covered by version 3
+of the GNU General Public License that is incorporated pursuant to the
+following paragraph.
+
+Notwithstanding any other provision of this License, you have
+permission to link or combine any covered work with a work licensed
+under version 3 of the GNU General Public License into a single
+combined work, and to convey the resulting work. The terms of this
+License will continue to apply to the part which is the covered work,
+but the work with which it is combined will remain governed by version
+3 of the GNU General Public License.
+
+### 14. Revised Versions of this License
+
+The Free Software Foundation may publish revised and/or new versions of
+the GNU Affero General Public License from time to time. Such new versions
+will be similar in spirit to the present version, but may differ in detail to
+address new problems or concerns.
+
+Each version is given a distinguishing version number. If the
+Program specifies that a certain numbered version of the GNU Affero General
+Public License “or any later version” applies to it, you have the
+option of following the terms and conditions either of that numbered
+version or of any later version published by the Free Software
+Foundation. If the Program does not specify a version number of the
+GNU Affero General Public License, you may choose any version ever published
+by the Free Software Foundation.
+
+If the Program specifies that a proxy can decide which future
+versions of the GNU Affero General Public License can be used, that proxy's
+public statement of acceptance of a version permanently authorizes you
+to choose that version for the Program.
+
+Later license versions may give you additional or different
+permissions. However, no additional obligations are imposed on any
+author or copyright holder as a result of your choosing to follow a
+later version.
+
+### 15. Disclaimer of Warranty
+
+THERE IS NO WARRANTY FOR THE PROGRAM, TO THE EXTENT PERMITTED BY
+APPLICABLE LAW. EXCEPT WHEN OTHERWISE STATED IN WRITING THE COPYRIGHT
+HOLDERS AND/OR OTHER PARTIES PROVIDE THE PROGRAM “AS IS” WITHOUT WARRANTY
+OF ANY KIND, EITHER EXPRESSED OR IMPLIED, INCLUDING, BUT NOT LIMITED TO,
+THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+PURPOSE. THE ENTIRE RISK AS TO THE QUALITY AND PERFORMANCE OF THE PROGRAM
+IS WITH YOU. SHOULD THE PROGRAM PROVE DEFECTIVE, YOU ASSUME THE COST OF
+ALL NECESSARY SERVICING, REPAIR OR CORRECTION.
+
+### 16. Limitation of Liability
+
+IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN WRITING
+WILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MODIFIES AND/OR CONVEYS
+THE PROGRAM AS PERMITTED ABOVE, BE LIABLE TO YOU FOR DAMAGES, INCLUDING ANY
+GENERAL, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES ARISING OUT OF THE
+USE OR INABILITY TO USE THE PROGRAM (INCLUDING BUT NOT LIMITED TO LOSS OF
+DATA OR DATA BEING RENDERED INACCURATE OR LOSSES SUSTAINED BY YOU OR THIRD
+PARTIES OR A FAILURE OF THE PROGRAM TO OPERATE WITH ANY OTHER PROGRAMS),
+EVEN IF SUCH HOLDER OR OTHER PARTY HAS BEEN ADVISED OF THE POSSIBILITY OF
+SUCH DAMAGES.
+
+### 17. Interpretation of Sections 15 and 16
+
+If the disclaimer of warranty and limitation of liability provided
+above cannot be given local legal effect according to their terms,
+reviewing courts shall apply local law that most closely approximates
+an absolute waiver of all civil liability in connection with the
+Program, unless a warranty or assumption of liability accompanies a
+copy of the Program in return for a fee.
+
+_END OF TERMS AND CONDITIONS_
+
+## How to Apply These Terms to Your New Programs
+
+If you develop a new program, and you want it to be of the greatest
+possible use to the public, the best way to achieve this is to make it
+free software which everyone can redistribute and change under these terms.
+
+To do so, attach the following notices to the program. It is safest
+to attach them to the start of each source file to most effectively
+state the exclusion of warranty; and each file should have at least
+the “copyright” line and a pointer to where the full notice is found.
+
+    <one line to give the program's name and a brief idea of what it does.>
+    Copyright (C) <year>  <name of author>
+
+    This program is free software: you can redistribute it and/or modify
+    it under the terms of the GNU Affero General Public License as published by
+    the Free Software Foundation, either version 3 of the License, or
+    (at your option) any later version.
+
+    This program is distributed in the hope that it will be useful,
+    but WITHOUT ANY WARRANTY; without even the implied warranty of
+    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+    GNU Affero General Public License for more details.
+
+    You should have received a copy of the GNU Affero General Public License
+    along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+Also add information on how to contact you by electronic and paper mail.
+
+If your software can interact with users remotely through a computer
+network, you should also make sure that it provides a way for users to
+get its source. For example, if your program is a web application, its
+interface could display a “Source” link that leads users to an archive
+of the code. There are many ways you could offer source, and different
+solutions will be better for different programs; see section 13 for the
+specific requirements.
+
+You should also get your employer (if you work as a programmer) or school,
+if any, to sign a “copyright disclaimer” for the program, if necessary.
+For more information on this, and how to apply and follow the GNU AGPL, see
+&lt;<http://www.gnu.org/licenses/>&gt;.

package.json

@@ -1,6 +1,8 @@
 {
     "name": "@panic/web-ui",
-  "version": "0.1.3",
+    "version": "0.1.11",
+    "license": "AGPL-3.0-only",
+    "description": "Core components for panic.haus web applications",
     "type": "module",
     "main": "./dist/index.js",
     "module": "./dist/index.js",
@@ -25,6 +27,12 @@
     "scripts": {
         "clean": "rm -rf dist",
         "build": "yarn clean && vite build && tsc -p tsconfig.build.json && mkdir -p dist/styles && cp src/styles/base.css dist/styles/base.css && tailwindcss -c tailwind.build.config.cjs -i src/styles/components.css -o dist/styles/components.css --minify && tailwindcss -c tailwind.build.config.cjs -i src/styles/utilities.css -o dist/styles/utilities.css --minify && cp tailwind-preset.cjs dist/tailwind-preset.cjs",
+        "lint": "eslint .",
+        "lint:fix": "eslint . --fix",
+        "format": "prettier . --write",
+        "format:check": "prettier . --check",
+        "storybook": "storybook dev -p 6006",
+        "build-storybook": "storybook build",
         "prepublishOnly": "yarn build",
         "publish:nexus": "npm publish --registry ${NEXUS_NPM_REGISTRY:-https://nexus.beatrice.wtf/repository/npm-hosted/}"
     },
@@ -45,16 +53,34 @@
         }
     },
     "devDependencies": {
+        "@codemirror/language": "^6.11.3",
+        "@eslint/js": "^10",
         "@heroicons/react": "^2.2.0",
+        "@lezer/highlight": "^1.2.1",
         "@mdxeditor/editor": "^3.52.4",
+        "@storybook/addon-a11y": "^10.2.10",
+        "@storybook/addon-docs": "^10.2.10",
+        "@storybook/addon-themes": "^10.2.10",
+        "@storybook/react": "^10.2.10",
+        "@storybook/react-vite": "^10.2.10",
+        "@testing-library/dom": "^10.4.1",
         "@types/react": "^19.0.0",
         "@types/react-dom": "^19.0.0",
         "@vitejs/plugin-react": "^5.0.0",
+        "eslint": "^10",
+        "eslint-plugin-react-hooks": "^7.0.1",
+        "eslint-plugin-react-refresh": "^0.5.1",
+        "globals": "^17.3.0",
+        "postcss": "^8.4.49",
+        "prettier": "^3.8.1",
         "react": "^19.0.0",
         "react-dom": "^19.0.0",
         "react-router-dom": "^7.0.0",
+        "storybook": "^10.2.10",
         "tailwindcss": "^3.4.16",
         "typescript": "^5.6.2",
-    "vite": "^7.0.0"
+        "typescript-eslint": "^8.56.0",
+        "vite": "^7.0.0",
+        "yjs": "^13.6.24"
     }
 }

postcss.config.cjs

@@ -0,0 +1,7 @@
+module.exports = {
+    plugins: {
+        tailwindcss: {
+            config: './tailwind.storybook.config.cjs',
+        },
+    },
+};

renovate.json

@@ -0,0 +1,3 @@
+{
+    "$schema": "https://docs.renovatebot.com/renovate-schema.json"
+}

src/components/Button.stories.tsx

@@ -0,0 +1,145 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { PlusIcon } from '@heroicons/react/24/solid';
+import { Button } from './Button';
+
+const meta = {
+    title: 'Components/Button',
+    component: Button,
+    tags: ['autodocs'],
+    parameters: {
+        docs: {
+            description: {
+                component:
+                    'Polymorphic button component: renders a native `<button>` or a React Router `<Link>` when `to` is provided.',
+            },
+        },
+    },
+    argTypes: {
+        label: {
+            description: 'Visible button label text.',
+            control: 'text',
+            table: { type: { summary: 'string' } },
+        },
+        type: {
+            description: 'Base visual style.',
+            options: ['solid', 'outlined', 'noborder'],
+            control: 'inline-radio',
+            table: { type: { summary: "'solid' | 'outlined' | 'noborder'" } },
+        },
+        variant: {
+            description:
+                'Color variant. If omitted: `primary` for `solid`, `secondary` for the other types.',
+            options: ['primary', 'secondary', 'important'],
+            control: 'inline-radio',
+            table: { type: { summary: "'primary' | 'secondary' | 'important'" } },
+        },
+        size: {
+            description: 'Button size.',
+            options: ['sm', 'md', 'lg', 'full'],
+            control: 'inline-radio',
+            table: { type: { summary: "'sm' | 'md' | 'lg' | 'full'" } },
+        },
+        width: {
+            description: 'Button width behavior.',
+            options: ['sm', 'md', 'lg', 'full'],
+            control: 'inline-radio',
+            table: { type: { summary: "'sm' | 'md' | 'lg' | 'full'" } },
+        },
+        to: {
+            description: 'Navigation path. When set, the component renders a `<Link>`.',
+            control: 'text',
+            table: { type: { summary: 'string' } },
+        },
+        htmlType: {
+            description: 'HTML button type used when rendering a native `<button>`.',
+            options: ['button', 'submit', 'reset'],
+            control: 'inline-radio',
+            table: { type: { summary: "'button' | 'submit' | 'reset'" } },
+        },
+        disabled: {
+            description: 'Disables interaction and hover/click states.',
+            control: 'boolean',
+            table: { type: { summary: 'boolean' } },
+        },
+        icon: {
+            description: 'Optional icon component (for example Heroicons).',
+            control: false,
+            table: { type: { summary: 'ElementType' } },
+        },
+        ariaLabel: {
+            description: 'Accessible label. Falls back to `label` when not provided.',
+            control: 'text',
+            table: { type: { summary: 'string' } },
+        },
+        className: {
+            description: 'Extra CSS classes for the root element.',
+            control: 'text',
+            table: { type: { summary: 'string' } },
+        },
+        onClick: {
+            description: 'Click handler callback.',
+            action: 'clicked',
+            table: { type: { summary: 'MouseEventHandler<HTMLElement>' } },
+        },
+    },
+    args: {
+        type: 'solid',
+        variant: 'primary',
+        size: 'md',
+        width: 'md',
+        label: 'Save',
+    },
+} satisfies Meta<typeof Button>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const SolidPrimary: Story = {};
+
+export const SolidImportant: Story = {
+    args: {
+        type: 'solid',
+        variant: 'important',
+        label: 'Delete',
+    },
+};
+
+export const OutlinedSecondary: Story = {
+    args: {
+        type: 'outlined',
+        variant: 'secondary',
+        label: 'Cancel',
+    },
+};
+
+export const IconOnly: Story = {
+    args: {
+        icon: PlusIcon,
+        label: undefined,
+        ariaLabel: 'Add item',
+    },
+};
+
+export const LinkButton: Story = {
+    args: {
+        to: '/demo',
+        label: 'Go to demo',
+    },
+};
+
+export const Disabled: Story = {
+    args: {
+        disabled: true,
+    },
+};
+
+export const SizeMatrix: Story = {
+    render: (args) => (
+        <div className="grid grid-cols-1 gap-3">
+            <Button {...args} size="sm" label="Small" />
+            <Button {...args} size="md" label="Medium" />
+            <Button {...args} size="lg" label="Large" />
+            <Button {...args} size="md" width="full" label="Full width" />
+        </div>
+    ),
+};

src/components/Button.tsx

@@ -11,6 +11,7 @@ type ButtonProps = {
     type: ButtonType;
     variant?: ButtonVariant;
     size?: ComponentSize;
+    width?: ComponentSize;
     to?: string;
     htmlType?: NativeButtonType;
     onClick?: MouseEventHandler<HTMLElement>;
@@ -24,40 +25,47 @@ const SIZE_CLASS: Record<ComponentSize, string> = {
     sm: 'h-8 px-3 text-xs',
     md: 'h-10 px-4 text-sm',
     lg: 'h-12 px-5 text-base',
-  full: 'h-10 w-full px-4 text-sm'
+    full: 'h-10 px-4 text-sm',
 };
 
 const ICON_ONLY_SIZE_CLASS: Record<ComponentSize, string> = {
     sm: 'h-8 w-8 !p-0',
     md: 'h-10 w-10 !p-0',
     lg: 'h-12 w-12 !p-0',
-  full: 'h-10 w-full !p-0'
+    full: 'h-10 w-10 !p-0',
 };
 
 const ICON_CLASS: Record<ComponentSize, string> = {
     sm: 'h-4 w-4',
     md: 'h-4 w-4',
     lg: 'h-5 w-5',
-  full: 'h-4 w-4'
+    full: 'h-4 w-4',
 };
 
 const ICON_ONLY_CLASS: Record<ComponentSize, string> = {
     sm: 'h-4 w-4',
     md: 'h-5 w-5',
     lg: 'h-6 w-6',
-  full: 'h-5 w-5'
+    full: 'h-5 w-5',
+};
+
+const WIDTH_CLASS: Record<ComponentSize, string> = {
+    sm: 'max-w-xs',
+    md: '',
+    lg: 'max-w-md',
+    full: 'w-full max-w-none',
 };
 
 const TYPE_CLASS: Record<ButtonType, string> = {
     solid: 'btn-solid',
     outlined: 'btn-outlined',
-  noborder: 'btn-noborder'
+    noborder: 'btn-noborder',
 };
 
 const VARIANT_CLASS: Record<ButtonVariant, string> = {
     primary: 'btn-primary',
     secondary: 'btn-secondary',
-  important: 'btn-important'
+    important: 'btn-important',
 };
 
 function resolveVariant(type: ButtonType, variant?: ButtonVariant): ButtonVariant {
@@ -73,13 +81,14 @@ export function Button({
     type,
     variant,
     size = 'md',
+    width = 'md',
     to,
     htmlType = 'button',
     onClick,
     disabled = false,
     icon: Icon,
     ariaLabel,
-  className = ''
+    className = '',
 }: Readonly<ButtonProps>) {
     const isIconOnly = Icon != null && !label;
     const resolvedVariant = resolveVariant(type, variant);
@@ -87,10 +96,13 @@ export function Button({
         TYPE_CLASS[type],
         VARIANT_CLASS[resolvedVariant],
         isIconOnly ? ICON_ONLY_SIZE_CLASS[size] : SIZE_CLASS[size],
+        WIDTH_CLASS[width],
         Icon && label ? 'gap-1.5' : '',
         disabled ? 'pointer-events-none cursor-not-allowed opacity-45 saturate-50' : '',
-    className
+        className,
-  ].join(' ').trim();
+    ]
+        .join(' ')
+        .trim();
     const computedAriaLabel = ariaLabel ?? label;
     const iconClass = `${isIconOnly ? ICON_ONLY_CLASS[size] : ICON_CLASS[size]} shrink-0`;
     const content = (

src/components/Chip.stories.tsx

@@ -0,0 +1,98 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Chip } from './Chip';
+
+const meta = {
+    title: 'Components/Chip',
+    component: Chip,
+    tags: ['autodocs'],
+    parameters: {
+        docs: {
+            description: {
+                component:
+                    'Compact badge/chip component with solid or outlined style. `tone` accepts a Tailwind color token (for example `cyan-700`) and resolves it to the correct border/background/text color at runtime.',
+            },
+        },
+    },
+    argTypes: {
+        variant: {
+            description: 'Chip visual style.',
+            options: ['solid', 'outlined'],
+            control: 'inline-radio',
+            table: { type: { summary: "'solid' | 'outlined'" } },
+        },
+        tone: {
+            description:
+                'Tailwind color token (format: `<color>-<shade>`, for example `cyan-700`, `indigo-600`, `rose-500`).',
+            control: 'text',
+            table: { type: { summary: 'string' } },
+        },
+        as: {
+            description:
+                "Root tag or component to render (for example `'span'`, `'a'`, `'button'`).",
+            control: false,
+            table: { type: { summary: 'ElementType' } },
+        },
+        className: {
+            description: 'Extra CSS classes for the root element.',
+            control: 'text',
+            table: { type: { summary: 'string' } },
+        },
+        children: {
+            description: 'Text or React node rendered inside the chip.',
+            control: 'text',
+            table: { type: { summary: 'ReactNode' } },
+        },
+    },
+    args: {
+        children: 'Published',
+        variant: 'solid',
+    },
+} satisfies Meta<typeof Chip>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const SolidDefault: Story = {};
+
+export const OutlinedIndigo: Story = {
+    args: {
+        variant: 'outlined',
+        tone: 'indigo-700',
+        children: 'Draft',
+    },
+};
+
+export const OutlinedCyan: Story = {
+    args: {
+        variant: 'outlined',
+        tone: 'cyan-700',
+        children: 'Archived',
+    },
+};
+
+export const ToneMatrix: Story = {
+    render: () => (
+        <div className="flex flex-wrap items-center gap-2">
+            <Chip variant="solid">Default</Chip>
+            <Chip variant="solid" tone="indigo-700">
+                Indigo
+            </Chip>
+            <Chip variant="solid" tone="cyan-700">
+                Cyan
+            </Chip>
+            <Chip variant="solid" tone="rose-600">
+                Rose
+            </Chip>
+            <Chip variant="outlined">Default</Chip>
+            <Chip variant="outlined" tone="indigo-700">
+                Indigo
+            </Chip>
+            <Chip variant="outlined" tone="cyan-700">
+                Cyan
+            </Chip>
+            <Chip variant="outlined" tone="rose-600">
+                Rose
+            </Chip>
+        </div>
+    ),
+};

src/components/Chip.tsx

@@ -1,11 +1,12 @@
-import type { ElementType, ReactNode } from 'react';
+import * as tailwindColors from 'tailwindcss/colors';
+import type { CSSProperties, ElementType, ReactNode } from 'react';
 
 type ChipVariant = 'solid' | 'outlined';
-type ChipTone = 'neutral' | 'indigo' | 'cyan';
 
 type ChipProps<T extends ElementType> = {
     variant?: ChipVariant;
-  tone?: ChipTone;
+    // Tailwind color token, e.g. "cyan-700", "indigo-500", "rose-600".
+    tone?: string;
     as?: T;
     className?: string;
     children: ReactNode;
@@ -13,24 +14,57 @@ type ChipProps<T extends ElementType> = {
 
 const variantClassMap: Record<ChipVariant, string> = {
     solid: 'chip-solid',
-  outlined: 'chip-outlined'
+    outlined: 'chip-outlined',
 };
 
-const toneClassMap: Record<ChipTone, string> = {
+type TailwindPalette = Record<string, string>;
-  neutral: 'chip-neutral',
+
-  indigo: 'chip-indigo',
+function resolveTailwindToneColor(tone: string | undefined): string | null {
-  cyan: 'chip-cyan'
+    const normalizedTone = tone?.trim().toLowerCase();
-};
+    if (normalizedTone == null || normalizedTone === '') {
+        return null;
+    }
+
+    const colorSource = tailwindColors as unknown as Record<string, unknown>;
+    const lastDashIndex = normalizedTone.lastIndexOf('-');
+
+    if (lastDashIndex === -1) {
+        const direct = colorSource[normalizedTone];
+        return typeof direct === 'string' ? direct : null;
+    }
+
+    const colorName = normalizedTone.slice(0, lastDashIndex);
+    const shade = normalizedTone.slice(lastDashIndex + 1);
+    const palette = colorSource[colorName];
+
+    if (palette == null || typeof palette !== 'object') {
+        return null;
+    }
+
+    const shadeColor = (palette as TailwindPalette)[shade];
+    return typeof shadeColor === 'string' ? shadeColor : null;
+}
 
 export function Chip<T extends ElementType = 'span'>({
     variant = 'solid',
-  tone = 'neutral',
+    tone,
     as,
     className = '',
-  children
+    children,
 }: Readonly<ChipProps<T>>) {
-  const Component = as ?? 'span' as ElementType;
+    const Component = as ?? ('span' as ElementType);
-  const classes = `chip-root ${variantClassMap[variant]} ${toneClassMap[tone]} ${className}`.trim();
+    const toneColor = resolveTailwindToneColor(tone);
+    const toneStyle: CSSProperties | undefined =
+        toneColor == null
+            ? undefined
+            : variant === 'solid'
+              ? { borderColor: toneColor, backgroundColor: toneColor, color: '#ffffff' }
+              : { borderColor: toneColor, color: toneColor };
+    const classes = `chip-root ${variantClassMap[variant]} ${className}`.trim();
 
-  return <Component className={classes}>{children}</Component>;
+    return (
+        <Component className={classes} style={toneStyle}>
+            {children}
+        </Component>
+    );
 }

src/components/DatePicker.stories.tsx

@@ -0,0 +1,240 @@
+import { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { CalendarDaysIcon } from '@heroicons/react/24/solid';
+import { DatePicker } from './DatePicker';
+
+const meta = {
+    title: 'Components/DatePicker',
+    component: DatePicker,
+    tags: ['autodocs'],
+    parameters: {
+        docs: {
+            description: {
+                component:
+                    'Date selection field with InputField-compatible API, supporting date/time/datetime-local values, size/layout variants, and validation state.',
+            },
+        },
+    },
+    argTypes: {
+        label: {
+            description: 'Label text shown above (stacked) or on the left (inline).',
+            control: 'text',
+            table: { type: { summary: 'string' } },
+        },
+        placeholder: {
+            description: 'Input placeholder text.',
+            control: 'text',
+            table: { type: { summary: 'string' } },
+        },
+        type: {
+            description: 'Native date input type.',
+            options: ['date', 'datetime-local', 'time'],
+            control: 'inline-radio',
+            table: { type: { summary: "'date' | 'datetime-local' | 'time'" } },
+        },
+        size: {
+            description: 'Input size.',
+            options: ['sm', 'md', 'lg', 'full'],
+            control: 'inline-radio',
+            table: { type: { summary: "'sm' | 'md' | 'lg' | 'full'" } },
+        },
+        width: {
+            description: 'Input width constraint.',
+            options: ['sm', 'md', 'lg', 'full'],
+            control: 'inline-radio',
+            table: { type: { summary: "'sm' | 'md' | 'lg' | 'full'" } },
+        },
+        layout: {
+            description: 'Label/input layout mode.',
+            options: ['stacked', 'inline'],
+            control: 'inline-radio',
+            table: { type: { summary: "'stacked' | 'inline'" } },
+        },
+        value: {
+            description: 'Controlled input value.',
+            control: 'text',
+            table: { type: { summary: 'string' } },
+        },
+        name: {
+            description: 'Native input `name` attribute.',
+            control: 'text',
+            table: { type: { summary: 'string' } },
+        },
+        disabled: {
+            description: 'Disables the input.',
+            control: 'boolean',
+            table: { type: { summary: 'boolean' } },
+        },
+        required: {
+            description: 'Sets the native HTML `required` attribute.',
+            control: 'boolean',
+            table: { type: { summary: 'boolean' } },
+        },
+        error: {
+            description: 'Validation message shown below the field.',
+            control: 'text',
+            table: { type: { summary: 'string' } },
+        },
+        rightIcon: {
+            description: 'Optional trailing icon node.',
+            control: false,
+            table: { type: { summary: 'ReactNode' } },
+        },
+        className: {
+            description: 'Extra CSS classes for the outer wrapper.',
+            control: 'text',
+            table: { type: { summary: 'string' } },
+        },
+        inputClassName: {
+            description: 'Extra CSS classes for the `<input>` element.',
+            control: 'text',
+            table: { type: { summary: 'string' } },
+        },
+        onChange: {
+            description: 'Change handler callback.',
+            action: 'changed',
+            table: { type: { summary: 'ChangeEventHandler<HTMLInputElement>' } },
+        },
+        onBlur: {
+            description: 'Blur handler callback.',
+            control: false,
+            table: { type: { summary: 'FocusEventHandler<HTMLInputElement>' } },
+        },
+        inputRef: {
+            description: 'Ref forwarded to the native `<input>` element.',
+            control: false,
+            table: { type: { summary: 'Ref<HTMLInputElement>' } },
+        },
+    },
+    args: {
+        label: 'Schedule at',
+        type: 'datetime-local',
+        value: '',
+        size: 'md',
+        width: 'md',
+        layout: 'stacked',
+    },
+} satisfies Meta<typeof DatePicker>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const DateOnly: Story = {
+    args: {
+        type: 'date',
+        label: 'Publish date',
+    },
+    render: (args) => {
+        const [value, setValue] = useState('2031-05-20');
+        return (
+            <DatePicker
+                {...args}
+                value={value}
+                onChange={(event) => {
+                    setValue(event.target.value);
+                    args.onChange?.(event);
+                }}
+            />
+        );
+    },
+};
+
+export const DateTime: Story = {
+    args: {
+        type: 'datetime-local',
+        label: 'Schedule at',
+    },
+    render: (args) => {
+        const [value, setValue] = useState('2031-05-20T14:30');
+        return (
+            <DatePicker
+                {...args}
+                value={value}
+                onChange={(event) => {
+                    setValue(event.target.value);
+                    args.onChange?.(event);
+                }}
+            />
+        );
+    },
+};
+
+export const TimeOnlyInline: Story = {
+    args: {
+        type: 'time',
+        label: 'Start time',
+        layout: 'inline',
+        size: 'sm',
+        rightIcon: <CalendarDaysIcon className="h-4 w-4 ui-body-secondary" />,
+    },
+    render: (args) => {
+        const [value, setValue] = useState('09:00');
+        return (
+            <DatePicker
+                {...args}
+                value={value}
+                onChange={(event) => {
+                    setValue(event.target.value);
+                    args.onChange?.(event);
+                }}
+            />
+        );
+    },
+};
+
+export const Error: Story = {
+    args: {
+        type: 'datetime-local',
+        label: 'Schedule at',
+        value: '',
+        error: 'Pick a valid future date and time',
+    },
+};
+
+export const Disabled: Story = {
+    args: {
+        type: 'datetime-local',
+        label: 'Published at',
+        value: '2031-05-20T14:30',
+        disabled: true,
+    },
+};
+
+export const SizeMatrix: Story = {
+    args: {
+        type: 'datetime-local',
+        label: 'Schedule at',
+    },
+    render: (args) => {
+        const [value, setValue] = useState('2031-05-20T14:30');
+        return (
+            <div className="grid grid-cols-1 gap-3">
+                <DatePicker
+                    {...args}
+                    value={value}
+                    size="sm"
+                    onChange={(event) => setValue(event.target.value)}
+                />
+                <DatePicker
+                    {...args}
+                    value={value}
+                    size="md"
+                    onChange={(event) => setValue(event.target.value)}
+                />
+                <DatePicker
+                    {...args}
+                    value={value}
+                    size="lg"
+                    onChange={(event) => setValue(event.target.value)}
+                />
+                <DatePicker
+                    {...args}
+                    value={value}
+                    size="full"
+                    width="full"
+                    onChange={(event) => setValue(event.target.value)}
+                />
+            </div>
+        );
+    },
+};

src/components/DatePicker.tsx

@@ -0,0 +1,97 @@
+import type { ChangeEventHandler, FocusEventHandler, ReactNode, Ref } from 'react';
+import type { ComponentSize } from './types';
+
+type DatePickerKind = 'date' | 'datetime-local' | 'time';
+type Layout = 'stacked' | 'inline';
+
+export type DatePickerProps = {
+    label?: string;
+    placeholder?: string;
+    type: DatePickerKind;
+    size?: ComponentSize;
+    width?: ComponentSize;
+    layout?: Layout;
+    value: string;
+    name?: string;
+    onChange?: ChangeEventHandler<HTMLInputElement>;
+    onBlur?: FocusEventHandler<HTMLInputElement>;
+    inputRef?: Ref<HTMLInputElement>;
+    disabled?: boolean;
+    required?: boolean;
+    error?: string;
+    rightIcon?: ReactNode;
+    className?: string;
+    inputClassName?: string;
+};
+
+export function DatePicker({
+    label,
+    placeholder = '',
+    type,
+    size = 'md',
+    width = 'md',
+    layout = 'stacked',
+    value,
+    name,
+    onChange,
+    onBlur,
+    inputRef,
+    disabled = false,
+    required = false,
+    error,
+    rightIcon,
+    className = '',
+    inputClassName = '',
+}: Readonly<DatePickerProps>) {
+    const containerWidthClass = {
+        sm: 'max-w-xs',
+        md: 'max-w-sm',
+        lg: 'max-w-md',
+        full: 'max-w-none',
+    }[width];
+
+    const inputSizeClass = {
+        sm: 'h-8 !text-xs',
+        md: 'h-10 text-sm',
+        lg: 'h-12 text-sm',
+        full: 'h-10 text-sm',
+    }[size];
+
+    const wrapperClass =
+        layout === 'inline' ? 'inline-flex w-auto items-center gap-2' : 'block w-full gap-1';
+    const labelClass = layout === 'inline' ? 'text-xs ui-body-secondary' : '';
+    const hasTrailingIcon = Boolean(rightIcon);
+    const inputWrapperClass = layout === 'inline' ? 'relative' : 'relative mt-1';
+
+    return (
+        <label
+            className={`${wrapperClass} text-sm font-medium ${disabled ? 'ui-label-disabled' : 'ui-label'} ${containerWidthClass} ${className}`.trim()}
+        >
+            {label ? <span className={labelClass}>{label}</span> : null}
+            <div className={inputWrapperClass}>
+                <input
+                    type={type}
+                    value={value}
+                    name={name}
+                    onChange={onChange}
+                    onBlur={onBlur}
+                    ref={inputRef}
+                    placeholder={placeholder}
+                    disabled={disabled}
+                    required={required}
+                    className={`field w-full ${hasTrailingIcon ? 'pr-10' : ''} ${inputSizeClass} ${error ? 'border-red-400/70 focus:border-red-400 focus:ring-red-400/30' : ''} ${inputClassName}`.trim()}
+                />
+                {rightIcon ? (
+                    <span className="pointer-events-none absolute inset-y-0 right-2 inline-flex items-center justify-center px-1">
+                        {rightIcon}
+                    </span>
+                ) : null}
+            </div>
+            {error ? (
+                <span className="mt-1 block text-xs" style={{ color: 'var(--error-text)' }}>
+                    {error}
+                </span>
+            ) : null}
+        </label>
+    );
+}

src/components/Dropdown.stories.tsx

@@ -0,0 +1,168 @@
+import { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { Dropdown } from './Dropdown';
+
+const choices = [
+    { id: 'draft', label: 'Draft' },
+    { id: 'review', label: 'In review' },
+    { id: 'published', label: 'Published' },
+];
+
+const meta = {
+    title: 'Components/Dropdown',
+    component: Dropdown,
+    tags: ['autodocs'],
+    parameters: {
+        docs: {
+            description: {
+                component:
+                    'Styled select component with label, error state, stacked/inline layout, and multiple sizes.',
+            },
+        },
+    },
+    argTypes: {
+        label: {
+            description: 'Label text shown above (stacked) or on the left (inline).',
+            control: 'text',
+            table: { type: { summary: 'string' } },
+        },
+        value: {
+            description: 'Current selected value (must match one `choices[].id`).',
+            control: 'text',
+            table: { type: { summary: 'string' } },
+        },
+        choices: {
+            description: 'Options list in `{ id: string; label: string }` format.',
+            control: 'object',
+            table: { type: { summary: 'Array<{ id: string; label: string }>' } },
+        },
+        size: {
+            description: 'Control size.',
+            options: ['sm', 'md', 'lg', 'full'],
+            control: 'inline-radio',
+            table: { type: { summary: "'sm' | 'md' | 'lg' | 'full'" } },
+        },
+        width: {
+            description: 'Control width constraint.',
+            options: ['sm', 'md', 'lg', 'full'],
+            control: 'inline-radio',
+            table: { type: { summary: "'sm' | 'md' | 'lg' | 'full'" } },
+        },
+        layout: {
+            description: 'Label/control layout mode.',
+            options: ['stacked', 'inline'],
+            control: 'inline-radio',
+            table: { type: { summary: "'stacked' | 'inline'" } },
+        },
+        disabled: {
+            description: 'Disables the field.',
+            control: 'boolean',
+            table: { type: { summary: 'boolean' } },
+        },
+        required: {
+            description: 'Sets the native HTML `required` attribute.',
+            control: 'boolean',
+            table: { type: { summary: 'boolean' } },
+        },
+        error: {
+            description: 'Error message shown below the field.',
+            control: 'text',
+            table: { type: { summary: 'string' } },
+        },
+        className: {
+            description: 'Extra CSS classes for the wrapper.',
+            control: 'text',
+            table: { type: { summary: 'string' } },
+        },
+        selectClassName: {
+            description: 'Extra CSS classes for the `<select>` element.',
+            control: 'text',
+            table: { type: { summary: 'string' } },
+        },
+        onChange: {
+            description: 'Callback fired with the newly selected value.',
+            action: 'changed',
+            table: { type: { summary: '(value: string) => void' } },
+        },
+    },
+    args: {
+        label: 'Status',
+        value: 'draft',
+        choices,
+        size: 'md',
+        width: 'md',
+        layout: 'stacked',
+    },
+} satisfies Meta<typeof Dropdown>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Stacked: Story = {
+    render: (args) => {
+        const [value, setValue] = useState(args.value);
+        return (
+            <Dropdown
+                {...args}
+                value={value}
+                onChange={(next) => {
+                    setValue(next);
+                    args.onChange?.(next);
+                }}
+            />
+        );
+    },
+};
+
+export const Inline: Story = {
+    args: {
+        layout: 'inline',
+        size: 'sm',
+    },
+    render: (args) => {
+        const [value, setValue] = useState(args.value);
+        return (
+            <Dropdown
+                {...args}
+                value={value}
+                onChange={(next) => {
+                    setValue(next);
+                    args.onChange?.(next);
+                }}
+            />
+        );
+    },
+};
+
+export const Disabled: Story = {
+    args: {
+        disabled: true,
+    },
+};
+
+export const WithError: Story = {
+    args: {
+        error: 'Please choose a valid status',
+    },
+};
+
+export const SizeMatrix: Story = {
+    render: (args) => {
+        const [value, setValue] = useState(args.value);
+        return (
+            <div className="grid grid-cols-1 gap-3">
+                <Dropdown {...args} value={value} size="sm" label="Small" onChange={setValue} />
+                <Dropdown {...args} value={value} size="md" label="Medium" onChange={setValue} />
+                <Dropdown {...args} value={value} size="lg" label="Large" onChange={setValue} />
+                <Dropdown
+                    {...args}
+                    value={value}
+                    size="full"
+                    width="full"
+                    label="Full"
+                    onChange={setValue}
+                />
+            </div>
+        );
+    },
+};

src/components/Dropdown.tsx

@@ -14,6 +14,7 @@ type DropdownProps = {
     value: string;
     choices: DropdownChoice[];
     size?: ComponentSize;
+    width?: ComponentSize;
     layout?: DropdownLayout;
     disabled?: boolean;
     required?: boolean;
@@ -28,41 +29,43 @@ export function Dropdown({
     value,
     choices,
     size = 'md',
+    width = 'md',
     layout = 'stacked',
     disabled = false,
     required = false,
     onChange,
     error,
     className = '',
-  selectClassName = ''
+    selectClassName = '',
 }: Readonly<DropdownProps>) {
-  const containerSizeClass = {
+    const containerWidthClass = {
         sm: 'max-w-xs',
         md: 'max-w-sm',
         lg: 'max-w-md',
-    full: 'max-w-none'
+        full: 'max-w-none',
-  }[size];
+    }[width];
 
     const selectSizeClass = {
-    sm: 'h-8 text-xs',
+        sm: 'h-8 !text-xs',
         md: 'h-10 text-sm',
         lg: 'h-12 text-sm',
-    full: 'h-10 text-sm'
+        full: 'h-10 text-sm',
     }[size];
 
     const handleChange: ChangeEventHandler<HTMLSelectElement> = (event) => {
         onChange?.(event.target.value);
     };
 
-  const wrapperClass = layout === 'inline'
+    const wrapperClass =
-    ? 'inline-flex w-auto items-center gap-2'
+        layout === 'inline' ? 'inline-flex w-auto items-center gap-2' : 'block w-full gap-1';
-    : 'block w-full gap-1';
 
-  const selectWrapperClass = 'relative';
+    const selectWrapperClass = layout === 'inline' ? 'relative' : 'relative mt-1';
     const labelClass = layout === 'inline' ? 'text-xs ui-body-secondary' : '';
 
     return (
-    <label className={`${wrapperClass} text-sm font-medium ${disabled ? 'ui-label-disabled' : 'ui-label'} ${containerSizeClass} ${className}`.trim()}>
+        <label
+            className={`${wrapperClass} text-sm font-medium ${disabled ? 'ui-label-disabled' : 'ui-label'} ${containerWidthClass} ${className}`.trim()}
+        >
             {label ? <span className={labelClass}>{label}</span> : null}
             <div className={selectWrapperClass}>
                 <select
@@ -78,11 +81,17 @@ export function Dropdown({
                         </option>
                     ))}
                 </select>
-        <span className={`pointer-events-none absolute inset-y-0 right-3 flex items-center ${disabled ? 'ui-label-disabled' : 'ui-body-secondary'}`}>
+                <span
+                    className={`pointer-events-none absolute inset-y-0 right-3 flex items-center ${disabled ? 'ui-label-disabled' : 'ui-body-secondary'}`}
+                >
                     <ChevronDownIcon className="h-4 w-4" aria-hidden="true" />
                 </span>
             </div>
-      {error ? <span className="mt-1 block text-xs" style={{ color: 'var(--error-text)' }}>{error}</span> : null}
+            {error ? (
+                <span className="mt-1 block text-xs" style={{ color: 'var(--error-text)' }}>
+                    {error}
+                </span>
+            ) : null}
         </label>
     );
 }

src/components/Form.stories.tsx

@@ -0,0 +1,100 @@
+import { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { Button } from './Button';
+import { Dropdown } from './Dropdown';
+import { Form } from './Form';
+import { InputField } from './InputField';
+
+const meta = {
+    title: 'Components/Form',
+    component: Form,
+    tags: ['autodocs'],
+    parameters: {
+        docs: {
+            description: {
+                component:
+                    'Surface container with a title bar and a responsive content grid, intended for CMS forms.',
+            },
+        },
+    },
+    argTypes: {
+        title: {
+            description: 'Form title displayed in the header bar.',
+            control: 'text',
+            table: { type: { summary: 'string' } },
+        },
+        titleBarRight: {
+            description: 'Optional node rendered on the right side of the title bar.',
+            control: false,
+            table: { type: { summary: 'ReactNode' } },
+        },
+        children: {
+            description: 'Form content rendered inside the responsive grid.',
+            control: false,
+            table: { type: { summary: 'ReactNode' } },
+        },
+        className: {
+            description: 'Extra CSS classes for the root container.',
+            control: 'text',
+            table: { type: { summary: 'string' } },
+        },
+    },
+    args: {
+        title: 'Post details',
+    },
+} satisfies Meta<typeof Form>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Basic: Story = {
+    args: {
+        children: (
+            <>
+                <InputField label="Title" type="text" value="A short post title" />
+                <Dropdown
+                    label="Status"
+                    value="draft"
+                    choices={[
+                        { id: 'draft', label: 'Draft' },
+                        { id: 'published', label: 'Published' },
+                    ]}
+                />
+                <InputField label="Slug" type="text" value="a-short-post-title" />
+            </>
+        ),
+    },
+};
+
+export const WithActions: Story = {
+    render: (args) => {
+        const [title, setTitle] = useState('Storybook powered CMS');
+        const [status, setStatus] = useState('draft');
+
+        return (
+            <Form {...args} titleBarRight={<Button type="solid" size="sm" label="Save" />}>
+                <div className="col-span-2">
+                    <InputField
+                        label="Title"
+                        type="text"
+                        value={title}
+                        onChange={(event) => setTitle(event.target.value)}
+                        size="full"
+                        width="full"
+                    />
+                </div>
+                <Dropdown
+                    label="Status"
+                    value={status}
+                    onChange={setStatus}
+                    choices={[
+                        { id: 'draft', label: 'Draft' },
+                        { id: 'review', label: 'In review' },
+                        { id: 'published', label: 'Published' },
+                    ]}
+                />
+                <InputField label="Slug" type="text" value="storybook-powered-cms" />
+            </Form>
+        );
+    },
+};

src/components/Form.tsx

@@ -11,14 +11,15 @@ type FormProps = {
 export function Form({ title, titleBarRight, children, className = '' }: Readonly<FormProps>) {
     return (
         <div className={`surface overflow-hidden rounded-xl ${className}`.trim()}>
-      <div className="flex items-center justify-between border-b px-4 py-3 sm:px-5" style={{ borderColor: 'var(--surface-divider)' }}>
+            <div
+                className="flex items-center justify-between border-b px-4 py-3 sm:px-5"
+                style={{ borderColor: 'var(--surface-divider)' }}
+            >
                 <Label variant="h4">{title}</Label>
                 {titleBarRight ? <div>{titleBarRight}</div> : null}
             </div>
 
-      <div className="grid grid-cols-1 gap-4 p-4 sm:p-5 lg:grid-cols-3">
+            <div className="grid grid-cols-1 gap-4 p-4 sm:p-5 lg:grid-cols-3">{children}</div>
-        {children}
-      </div>
         </div>
     );
 }

src/components/InputField.stories.tsx

@@ -0,0 +1,245 @@
+import { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { MagnifyingGlassIcon } from '@heroicons/react/24/solid';
+import { InputField } from './InputField';
+
+const meta = {
+    title: 'Components/InputField',
+    component: InputField,
+    tags: ['autodocs'],
+    parameters: {
+        docs: {
+            description: {
+                component:
+                    'Text input field with optional label, validation state, size/layout variants, and password visibility toggle.',
+            },
+        },
+    },
+    argTypes: {
+        label: {
+            description: 'Label text shown above (stacked) or on the left (inline).',
+            control: 'text',
+            table: { type: { summary: 'string' } },
+        },
+        placeholder: {
+            description: 'Input placeholder text.',
+            control: 'text',
+            table: { type: { summary: 'string' } },
+        },
+        type: {
+            description: 'Native input type.',
+            options: ['text', 'password', 'email'],
+            control: 'inline-radio',
+            table: { type: { summary: "'text' | 'password' | 'email'" } },
+        },
+        size: {
+            description: 'Input size.',
+            options: ['sm', 'md', 'lg', 'full'],
+            control: 'inline-radio',
+            table: { type: { summary: "'sm' | 'md' | 'lg' | 'full'" } },
+        },
+        width: {
+            description: 'Input width constraint.',
+            options: ['sm', 'md', 'lg', 'full'],
+            control: 'inline-radio',
+            table: { type: { summary: "'sm' | 'md' | 'lg' | 'full'" } },
+        },
+        layout: {
+            description: 'Label/input layout mode.',
+            options: ['stacked', 'inline'],
+            control: 'inline-radio',
+            table: { type: { summary: "'stacked' | 'inline'" } },
+        },
+        value: {
+            description: 'Controlled input value.',
+            control: 'text',
+            table: { type: { summary: 'string' } },
+        },
+        name: {
+            description: 'Native input `name` attribute.',
+            control: 'text',
+            table: { type: { summary: 'string' } },
+        },
+        disabled: {
+            description: 'Disables the input.',
+            control: 'boolean',
+            table: { type: { summary: 'boolean' } },
+        },
+        required: {
+            description: 'Sets the native HTML `required` attribute.',
+            control: 'boolean',
+            table: { type: { summary: 'boolean' } },
+        },
+        error: {
+            description: 'Validation message shown below the field.',
+            control: 'text',
+            table: { type: { summary: 'string' } },
+        },
+        rightIcon: {
+            description:
+                'Optional trailing icon node (ignored for password type because toggle icon is used).',
+            control: false,
+            table: { type: { summary: 'ReactNode' } },
+        },
+        className: {
+            description: 'Extra CSS classes for the outer wrapper.',
+            control: 'text',
+            table: { type: { summary: 'string' } },
+        },
+        inputClassName: {
+            description: 'Extra CSS classes for the `<input>` element.',
+            control: 'text',
+            table: { type: { summary: 'string' } },
+        },
+        onChange: {
+            description: 'Change handler callback.',
+            action: 'changed',
+            table: { type: { summary: 'ChangeEventHandler<HTMLInputElement>' } },
+        },
+        onBlur: {
+            description: 'Blur handler callback.',
+            control: false,
+            table: { type: { summary: 'FocusEventHandler<HTMLInputElement>' } },
+        },
+        inputRef: {
+            description: 'Ref forwarded to the native `<input>` element.',
+            control: false,
+            table: { type: { summary: 'Ref<HTMLInputElement>' } },
+        },
+    },
+    args: {
+        label: 'Email',
+        type: 'email',
+        placeholder: 'name@example.com',
+        value: '',
+        size: 'md',
+        width: 'md',
+        layout: 'stacked',
+    },
+} satisfies Meta<typeof InputField>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Text: Story = {
+    args: {
+        type: 'text',
+        label: 'Title',
+        placeholder: 'Write a title',
+    },
+    render: (args) => {
+        const [value, setValue] = useState('Storybook integration');
+        return (
+            <InputField
+                {...args}
+                value={value}
+                onChange={(event) => {
+                    setValue(event.target.value);
+                    args.onChange?.(event);
+                }}
+            />
+        );
+    },
+};
+
+export const PasswordWithToggle: Story = {
+    args: {
+        type: 'password',
+        label: 'Password',
+        placeholder: 'Type a strong password',
+    },
+    render: (args) => {
+        const [value, setValue] = useState('pa55word');
+        return (
+            <InputField
+                {...args}
+                value={value}
+                onChange={(event) => {
+                    setValue(event.target.value);
+                    args.onChange?.(event);
+                }}
+            />
+        );
+    },
+};
+
+export const InlineWithIcon: Story = {
+    args: {
+        type: 'text',
+        label: 'Search',
+        layout: 'inline',
+        size: 'sm',
+        rightIcon: <MagnifyingGlassIcon className="h-4 w-4 ui-body-secondary" />,
+    },
+    render: (args) => {
+        const [value, setValue] = useState('posts');
+        return (
+            <InputField
+                {...args}
+                value={value}
+                onChange={(event) => {
+                    setValue(event.target.value);
+                    args.onChange?.(event);
+                }}
+            />
+        );
+    },
+};
+
+export const Error: Story = {
+    args: {
+        type: 'email',
+        label: 'Email',
+        value: 'invalid.mail',
+        error: 'Enter a valid email address',
+    },
+};
+
+export const Disabled: Story = {
+    args: {
+        type: 'text',
+        label: 'Read only field',
+        value: 'Locked content',
+        disabled: true,
+    },
+};
+
+export const SizeMatrix: Story = {
+    args: {
+        type: 'text',
+        label: 'Name',
+        placeholder: 'Enter value',
+    },
+    render: (args) => {
+        const [value, setValue] = useState('Beatrice');
+        return (
+            <div className="grid grid-cols-1 gap-3">
+                <InputField
+                    {...args}
+                    value={value}
+                    size="sm"
+                    onChange={(event) => setValue(event.target.value)}
+                />
+                <InputField
+                    {...args}
+                    value={value}
+                    size="md"
+                    onChange={(event) => setValue(event.target.value)}
+                />
+                <InputField
+                    {...args}
+                    value={value}
+                    size="lg"
+                    onChange={(event) => setValue(event.target.value)}
+                />
+                <InputField
+                    {...args}
+                    value={value}
+                    size="full"
+                    width="full"
+                    onChange={(event) => setValue(event.target.value)}
+                />
+            </div>
+        );
+    },
+};

src/components/InputField.tsx

@@ -12,6 +12,7 @@ type InputFieldProps = {
     placeholder?: string;
     type: InputKind;
     size?: ComponentSize;
+    width?: ComponentSize;
     layout?: Layout;
     value: string;
     name?: string;
@@ -31,6 +32,7 @@ export function InputField({
     placeholder = '',
     type,
     size = 'md',
+    width = 'md',
     layout = 'stacked',
     value,
     name,
@@ -42,26 +44,25 @@ export function InputField({
     error,
     rightIcon,
     className = '',
-  inputClassName = ''
+    inputClassName = '',
 }: Readonly<InputFieldProps>) {
     const [showPassword, setShowPassword] = useState(false);
-  const containerSizeClass = {
+    const containerWidthClass = {
         sm: 'max-w-xs',
         md: 'max-w-sm',
         lg: 'max-w-md',
-    full: 'max-w-none'
+        full: 'max-w-none',
-  }[size];
+    }[width];
 
     const inputSizeClass = {
-    sm: 'h-8 text-xs',
+        sm: 'h-8 !text-xs',
         md: 'h-10 text-sm',
         lg: 'h-12 text-sm',
-    full: 'h-10 text-sm'
+        full: 'h-10 text-sm',
     }[size];
 
-  const wrapperClass = layout === 'inline'
+    const wrapperClass =
-    ? 'inline-flex w-auto items-center gap-2'
+        layout === 'inline' ? 'inline-flex w-auto items-center gap-2' : 'block w-full gap-1';
-    : 'block w-full gap-1';
     const labelClass = layout === 'inline' ? 'text-xs ui-body-secondary' : '';
     const isPasswordType = type === 'password';
     const resolvedType: InputKind = isPasswordType && showPassword ? 'text' : type;
@@ -69,7 +70,9 @@ export function InputField({
     const inputWrapperClass = layout === 'inline' ? 'relative' : 'relative mt-1';
 
     return (
-    <label className={`${wrapperClass} text-sm font-medium ${disabled ? 'ui-label-disabled' : 'ui-label'} ${containerSizeClass} ${className}`.trim()}>
+        <label
+            className={`${wrapperClass} text-sm font-medium ${disabled ? 'ui-label-disabled' : 'ui-label'} ${containerWidthClass} ${className}`.trim()}
+        >
             {label ? <span className={labelClass}>{label}</span> : null}
             <div className={inputWrapperClass}>
                 <input
@@ -100,7 +103,11 @@ export function InputField({
                     </span>
                 ) : null}
             </div>
-      {error ? <span className="mt-1 block text-xs" style={{ color: 'var(--error-text)' }}>{error}</span> : null}
+            {error ? (
+                <span className="mt-1 block text-xs" style={{ color: 'var(--error-text)' }}>
+                    {error}
+                </span>
+            ) : null}
         </label>
     );
 }

src/components/Label.stories.tsx

@@ -0,0 +1,84 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Label } from './Label';
+
+const meta = {
+    title: 'Components/Label',
+    component: Label,
+    tags: ['autodocs'],
+    parameters: {
+        docs: {
+            description: {
+                component:
+                    'Typography helper component for headings, body text, caption, error text, and inline code styles.',
+            },
+        },
+    },
+    argTypes: {
+        variant: {
+            description: 'Typography style preset.',
+            options: ['h1', 'h2', 'h3', 'h4', 'body', 'body2', 'caption', 'error', 'code'],
+            control: 'select',
+            table: {
+                type: {
+                    summary:
+                        "'h1' | 'h2' | 'h3' | 'h4' | 'body' | 'body2' | 'caption' | 'error' | 'code'",
+                },
+            },
+        },
+        as: {
+            description:
+                "Override rendered HTML tag or component (for example `'p'`, `'span'`, `'h2'`).",
+            control: false,
+            table: { type: { summary: 'ElementType' } },
+        },
+        className: {
+            description: 'Extra CSS classes.',
+            control: 'text',
+            table: { type: { summary: 'string' } },
+        },
+        children: {
+            description: 'Label content.',
+            control: 'text',
+            table: { type: { summary: 'ReactNode' } },
+        },
+    },
+    args: {
+        variant: 'body',
+        children: 'Label text',
+    },
+} satisfies Meta<typeof Label>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Body: Story = {};
+
+export const Error: Story = {
+    args: {
+        variant: 'error',
+        children: 'This field is required',
+    },
+};
+
+export const Code: Story = {
+    args: {
+        variant: 'code',
+        children: 'const isPublished = true;',
+    },
+};
+
+export const VariantScale: Story = {
+    render: () => (
+        <div className="flex max-w-md flex-col gap-2">
+            <Label variant="caption">Caption</Label>
+            <Label variant="h1">Heading 1</Label>
+            <Label variant="h2">Heading 2</Label>
+            <Label variant="h3">Heading 3</Label>
+            <Label variant="h4">Heading 4</Label>
+            <Label variant="body">Primary body copy</Label>
+            <Label variant="body2">Secondary body copy</Label>
+            <Label variant="error">Error copy</Label>
+            <Label variant="code">npm run build</Label>
+        </div>
+    ),
+};

src/components/Label.tsx

@@ -1,15 +1,6 @@
 import type { ElementType, ReactNode } from 'react';
 
-type LabelVariant =
+type LabelVariant = 'h1' | 'h2' | 'h3' | 'h4' | 'body' | 'body2' | 'caption' | 'error' | 'code';
-  | 'h1'
-  | 'h2'
-  | 'h3'
-  | 'h4'
-  | 'body'
-  | 'body2'
-  | 'caption'
-  | 'error'
-  | 'code';
 
 type LabelProps<T extends ElementType> = {
     variant?: LabelVariant;
@@ -27,7 +18,7 @@ const variantClassMap: Record<LabelVariant, string> = {
     body2: 'ui-body-secondary text-sm',
     caption: 'ui-kicker text-xs font-semibold uppercase tracking-[0.12em]',
     error: 'ui-error text-sm',
-  code: 'ui-code text-sm font-mono'
+    code: 'ui-code text-sm font-mono',
 };
 
 const variantTagMap: Record<LabelVariant, ElementType> = {
@@ -39,14 +30,14 @@ const variantTagMap: Record<LabelVariant, ElementType> = {
     body2: 'p',
     caption: 'p',
     error: 'p',
-  code: 'code'
+    code: 'code',
 };
 
 export function Label<T extends ElementType = 'p'>({
     variant = 'body',
     as,
     className = '',
-  children
+    children,
 }: Readonly<LabelProps<T>>) {
     const Component = as ?? variantTagMap[variant];
     const classes = `${variantClassMap[variant]} ${className}`.trim();

src/components/MDXEditorField.stories.tsx

@@ -0,0 +1,163 @@
+import { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import {
+    headingsPlugin,
+    listsPlugin,
+    markdownShortcutPlugin,
+    quotePlugin,
+} from '@mdxeditor/editor';
+import { MDXEditorField } from './MDXEditorField';
+
+const basePlugins = [headingsPlugin(), listsPlugin(), quotePlugin(), markdownShortcutPlugin()];
+
+const sampleMarkdown = `# Hello from MDXEditor
+
+This is a paragraph with **bold** and _italic_ text.
+
+- First bullet
+- Second bullet
+`;
+
+const meta = {
+    title: 'Components/MDXEditorField',
+    component: MDXEditorField,
+    tags: ['autodocs'],
+    parameters: {
+        docs: {
+            description: {
+                component:
+                    'MDX editor wrapper with label, editable/read-only/disabled modes, theme class support, and error rendering.',
+            },
+        },
+    },
+    argTypes: {
+        label: {
+            description: 'Field label shown above the editor.',
+            control: 'text',
+            table: { type: { summary: 'string' } },
+        },
+        markdown: {
+            description: 'Controlled markdown content value.',
+            control: 'text',
+            table: { type: { summary: 'string' } },
+        },
+        readOnly: {
+            description: 'Enables read-only mode.',
+            control: 'boolean',
+            table: { type: { summary: 'boolean' } },
+        },
+        disabled: {
+            description: 'Disables editing and applies disabled visuals.',
+            control: 'boolean',
+            table: { type: { summary: 'boolean' } },
+        },
+        themeClassName: {
+            description:
+                'Theme class applied to MDXEditor (for example `light-theme` or `dark-theme`).',
+            control: 'text',
+            table: { type: { summary: 'string' } },
+        },
+        plugins: {
+            description: 'MDXEditor plugins array.',
+            control: false,
+            table: { type: { summary: 'MDXEditorProps["plugins"]' } },
+        },
+        contentEditableClassName: {
+            description: 'CSS class used on the content editable area.',
+            control: 'text',
+            table: { type: { summary: 'string' } },
+        },
+        className: {
+            description: 'Extra CSS classes for the outer wrapper.',
+            control: 'text',
+            table: { type: { summary: 'string' } },
+        },
+        editorWrapperClassName: {
+            description: 'Extra CSS classes for the editor shell element.',
+            control: 'text',
+            table: { type: { summary: 'string' } },
+        },
+        editorWrapperStyle: {
+            description: 'Inline style object for the editor shell.',
+            control: 'object',
+            table: { type: { summary: 'CSSProperties' } },
+        },
+        editorClassName: {
+            description: 'Extra CSS classes for the MDXEditor instance.',
+            control: 'text',
+            table: { type: { summary: 'string' } },
+        },
+        error: {
+            description: 'Error message shown below the editor.',
+            control: 'text',
+            table: { type: { summary: 'string' } },
+        },
+        onChange: {
+            description: 'Callback fired when markdown changes in editable mode.',
+            action: 'changed',
+            table: { type: { summary: '(markdown: string) => void' } },
+        },
+        editorRef: {
+            description: 'Ref to MDXEditor methods.',
+            control: false,
+            table: { type: { summary: 'Ref<MDXEditorMethods | null>' } },
+        },
+    },
+    args: {
+        label: 'Content',
+        markdown: sampleMarkdown,
+        plugins: basePlugins,
+        themeClassName: '',
+    },
+} satisfies Meta<typeof MDXEditorField>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Editable: Story = {
+    render: (args) => {
+        const [markdown, setMarkdown] = useState(args.markdown);
+        return (
+            <div className="w-full max-w-2xl">
+                <MDXEditorField
+                    {...args}
+                    markdown={markdown}
+                    onChange={(next) => {
+                        setMarkdown(next);
+                        args.onChange?.(next);
+                    }}
+                    editorWrapperClassName="mt-2 overflow-hidden rounded-xl border"
+                />
+            </div>
+        );
+    },
+};
+
+export const ReadOnly: Story = {
+    args: {
+        readOnly: true,
+    },
+    render: (args) => (
+        <div className="w-full max-w-2xl">
+            <MDXEditorField
+                {...args}
+                editorWrapperClassName="mt-2 overflow-hidden rounded-xl border"
+            />
+        </div>
+    ),
+};
+
+export const DisabledWithError: Story = {
+    args: {
+        disabled: true,
+        error: 'Editor is currently disabled',
+    },
+    render: (args) => (
+        <div className="w-full max-w-2xl">
+            <MDXEditorField
+                {...args}
+                editorWrapperClassName="mt-2 overflow-hidden rounded-xl border"
+            />
+        </div>
+    ),
+};

src/components/MDXEditorField.tsx

@@ -33,20 +33,28 @@ export function MDXEditorField({
     editorWrapperClassName = 'post-mdx-editor mt-2 overflow-hidden rounded-xl border',
     editorWrapperStyle,
     editorClassName = '',
-  error
+    error,
 }: Readonly<MDXEditorFieldProps>) {
     const resolvedEditorClassName = `${themeClassName} ${editorClassName}`.trim();
     const editorModeKey = disabled || readOnly ? 'read-only' : 'editable';
-  const resolvedEditorWrapperClassName = `${editorWrapperClassName} ${disabled ? 'post-mdx-editor--disabled' : 'post-mdx-editor--enabled'}`.trim();
+    const resolvedEditorWrapperClassName =
+        `${editorWrapperClassName} ${disabled ? 'post-mdx-editor--disabled' : 'post-mdx-editor--enabled'}`.trim();
     const resolvedEditorWrapperStyle: CSSProperties = {
         backgroundColor: disabled ? 'var(--field-disabled-bg)' : 'var(--field-bg)',
         borderColor: disabled ? 'var(--field-disabled-border)' : 'var(--field-border)',
-    ...editorWrapperStyle
+        ...editorWrapperStyle,
     };
 
     return (
         <div className={className}>
-      {label ? <Label variant="body" className={`font-medium ${disabled ? 'ui-label-disabled' : 'ui-label'}`}>{label}</Label> : null}
+            {label ? (
+                <Label
+                    variant="body"
+                    className={`font-medium ${disabled ? 'ui-label-disabled' : 'ui-label'}`}
+                >
+                    {label}
+                </Label>
+            ) : null}
             <div className={resolvedEditorWrapperClassName} style={resolvedEditorWrapperStyle}>
                 <MDXEditor
                     key={editorModeKey}
@@ -59,7 +67,11 @@ export function MDXEditorField({
                     plugins={plugins}
                 />
             </div>
-      {error ? <Label variant="error" className="mt-2 ui-error">{error}</Label> : null}
+            {error ? (
+                <Label variant="error" className="mt-2 ui-error">
+                    {error}
+                </Label>
+            ) : null}
         </div>
     );
 }

src/components/SidebarNavItem.stories.tsx

@@ -0,0 +1,82 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { HomeIcon, UserCircleIcon, UsersIcon } from '@heroicons/react/24/outline';
+import { SidebarNavItem } from './SidebarNavItem';
+
+const meta = {
+    title: 'Components/SidebarNavItem',
+    component: SidebarNavItem,
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'padded',
+        docs: {
+            description: {
+                component:
+                    'Sidebar navigation link with active state styling and collapsed/expanded rendering mode.',
+            },
+        },
+    },
+    argTypes: {
+        to: {
+            description: 'Destination route path.',
+            control: 'text',
+            table: { type: { summary: 'string' } },
+        },
+        label: {
+            description: 'Navigation item label.',
+            control: 'text',
+            table: { type: { summary: 'string' } },
+        },
+        icon: {
+            description: 'Icon component rendered before the label.',
+            control: false,
+            table: { type: { summary: 'ComponentType<SVGProps<SVGSVGElement>>' } },
+        },
+        collapsed: {
+            description: 'Collapsed state. When true, desktop view shows icon-only rail style.',
+            control: 'boolean',
+            table: { type: { summary: 'boolean' } },
+        },
+        onClick: {
+            description: 'Optional click callback (for example to close mobile drawer).',
+            action: 'clicked',
+            table: { type: { summary: '() => void' } },
+        },
+    },
+    args: {
+        to: '/',
+        label: 'Dashboard',
+        icon: HomeIcon,
+        collapsed: false,
+    },
+} satisfies Meta<typeof SidebarNavItem>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Expanded: Story = {
+    render: (args) => (
+        <nav className="flex w-56 flex-col gap-1">
+            <SidebarNavItem {...args} />
+            <SidebarNavItem to="/users" label="Users" icon={UsersIcon} collapsed={args.collapsed} />
+            <SidebarNavItem
+                to="/profile"
+                label="Profile"
+                icon={UserCircleIcon}
+                collapsed={args.collapsed}
+            />
+        </nav>
+    ),
+};
+
+export const Collapsed: Story = {
+    args: {
+        collapsed: true,
+    },
+    render: (args) => (
+        <nav className="flex w-14 flex-col gap-1">
+            <SidebarNavItem {...args} />
+            <SidebarNavItem to="/users" label="Users" icon={UsersIcon} collapsed />
+            <SidebarNavItem to="/profile" label="Profile" icon={UserCircleIcon} collapsed />
+        </nav>
+    ),
+};

src/components/SidebarNavItem.tsx

@@ -11,23 +11,33 @@ type SidebarNavItemProps = {
     onClick?: () => void;
 };
 
-export function SidebarNavItem({ to, label, icon: Icon, collapsed, onClick }: Readonly<SidebarNavItemProps>) {
+export function SidebarNavItem({
+    to,
+    label,
+    icon: Icon,
+    collapsed,
+    onClick,
+}: Readonly<SidebarNavItemProps>) {
     const layoutClass = collapsed
-    ? 'px-2 justify-start lg:mx-auto lg:w-8 lg:justify-center lg:px-0'
+        ? 'mx-auto w-8 justify-center px-0'
         : 'px-2 lg:w-full lg:justify-start';
 
     return (
         <NavLink
             to={to}
             onClick={onClick}
-      className={({ isActive }) => (
+            className={({ isActive }) =>
                 `inline-flex h-8 items-center rounded-lg text-sm font-medium transition ${layoutClass} ${
-          isActive ? 'bg-accent-500 text-white' : 'ui-body-secondary hover:bg-zinc-500/15'
+                    isActive ? 'ui-accent-active' : 'ui-body-secondary hover:bg-zinc-500/15'
                 }`
-      )}
+            }
         >
             <Icon className="h-4 w-4 shrink-0" />
-      {!collapsed ? <span className="ml-2 truncate leading-none">{label}</span> : <span className="ml-2 lg:hidden">{label}</span>}
+            {!collapsed ? (
+                <span className="ml-2 truncate leading-none">{label}</span>
+            ) : (
+                <span className="ml-2 lg:hidden">{label}</span>
+            )}
         </NavLink>
     );
 }

src/components/Table.stories.tsx

@@ -0,0 +1,230 @@
+import { useMemo, useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import type { SortState } from '../types/sort';
+import { Chip } from './Chip';
+import { Table, type TableHeader } from './Table';
+
+type UserRow = {
+    id: string;
+    name: string;
+    role: 'ADMIN' | 'EDITOR' | 'AUTHOR';
+    status: 'Active' | 'Pending';
+    posts: number;
+};
+
+const rows: UserRow[] = [
+    { id: '1', name: 'Beatrice Rosa', role: 'ADMIN', status: 'Active', posts: 48 },
+    { id: '2', name: 'Luca Valli', role: 'EDITOR', status: 'Active', posts: 26 },
+    { id: '3', name: 'Marta Bellini', role: 'AUTHOR', status: 'Pending', posts: 4 },
+    { id: '4', name: 'Giulia Fontana', role: 'AUTHOR', status: 'Active', posts: 12 },
+    { id: '5', name: 'Andrea Pini', role: 'EDITOR', status: 'Pending', posts: 9 },
+    { id: '6', name: 'Sofia Denti', role: 'AUTHOR', status: 'Active', posts: 7 },
+    { id: '7', name: 'Marco Serra', role: 'AUTHOR', status: 'Active', posts: 18 },
+    { id: '8', name: 'Elena Neri', role: 'EDITOR', status: 'Active', posts: 31 },
+];
+
+const headers: TableHeader<UserRow>[] = [
+    {
+        id: 'name',
+        label: 'Name',
+        value: (row) => row.name,
+        sortable: true,
+        sortField: 'name',
+        cellClassName: 'table-cell-primary',
+    },
+    {
+        id: 'role',
+        label: 'Role',
+        value: (row) => row.role,
+        sortable: true,
+        sortField: 'role',
+    },
+    {
+        id: 'status',
+        label: 'Status',
+        value: (row) => (
+            <Chip variant="outlined" tone={row.status === 'Active' ? 'indigo-700' : 'cyan-700'}>
+                {row.status}
+            </Chip>
+        ),
+    },
+    {
+        id: 'posts',
+        label: 'Posts',
+        value: (row) => row.posts,
+        sortable: true,
+        sortField: 'posts',
+    },
+];
+
+type UsersTableProps = {
+    data: UserRow[];
+    isLoading?: boolean;
+    emptyMessage?: string;
+    sorting?: SortState | null;
+    onSortChange?: (field: string) => void;
+    pagination?: {
+        page: number;
+        pageSize: number;
+        total: number;
+        totalPages: number;
+        onPageChange: (page: number) => void;
+        onPageSizeChange?: (pageSize: number) => void;
+    };
+};
+
+function UsersTable(props: Readonly<UsersTableProps>) {
+    return (
+        <Table<UserRow>
+            headers={headers}
+            data={props.data}
+            rowKey={(row) => row.id}
+            isLoading={props.isLoading}
+            emptyMessage={props.emptyMessage}
+            sorting={props.sorting}
+            onSortChange={props.onSortChange}
+            pagination={props.pagination}
+        />
+    );
+}
+
+function sortRows(data: UserRow[], sorting: SortState | null): UserRow[] {
+    if (!sorting) {
+        return data;
+    }
+
+    const sorted = [...data];
+    sorted.sort((a, b) => {
+        const left = a[sorting.field as keyof UserRow];
+        const right = b[sorting.field as keyof UserRow];
+        if (left === right) {
+            return 0;
+        }
+        if (typeof left === 'number' && typeof right === 'number') {
+            return sorting.direction === 'asc' ? left - right : right - left;
+        }
+        return sorting.direction === 'asc'
+            ? String(left).localeCompare(String(right))
+            : String(right).localeCompare(String(left));
+    });
+    return sorted;
+}
+
+const meta = {
+    title: 'Components/Table',
+    component: UsersTable,
+    tags: ['autodocs'],
+    parameters: {
+        docs: {
+            description: {
+                component:
+                    'Generic data table with loading/empty states, optional sorting controls, and optional pagination footer.',
+            },
+        },
+    },
+    argTypes: {
+        data: {
+            description: 'Rows rendered in the table body.',
+            control: 'object',
+            table: { type: { summary: 'UserRow[]' } },
+        },
+        isLoading: {
+            description: 'When true, shows the loading indicator row.',
+            control: 'boolean',
+            table: { type: { summary: 'boolean' } },
+        },
+        emptyMessage: {
+            description: 'Message shown when `data` is empty and `isLoading` is false.',
+            control: 'text',
+            table: { type: { summary: 'string' } },
+        },
+        sorting: {
+            description: 'Current sort state object. Use `null` for no active sorting.',
+            control: 'object',
+            table: { type: { summary: "{ field: string; direction: 'asc' | 'desc' } | null" } },
+        },
+        onSortChange: {
+            description: 'Callback fired when a sortable header is clicked.',
+            action: 'sort changed',
+            table: { type: { summary: '(field: string) => void' } },
+        },
+        pagination: {
+            description: 'Pagination config object. When omitted, pagination footer is hidden.',
+            control: 'object',
+            table: {
+                type: {
+                    summary:
+                        '{ page; pageSize; total; totalPages; onPageChange; onPageSizeChange? }',
+                },
+            },
+        },
+    },
+    args: {
+        data: rows,
+    },
+} satisfies Meta<typeof UsersTable>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const WithRows: Story = {};
+
+export const Loading: Story = {
+    args: {
+        isLoading: true,
+    },
+};
+
+export const Empty: Story = {
+    args: {
+        data: [],
+        emptyMessage: 'No users found',
+    },
+};
+
+export const InteractiveSortingAndPagination: Story = {
+    render: () => {
+        const [sorting, setSorting] = useState<SortState | null>({
+            field: 'name',
+            direction: 'asc',
+        });
+        const [page, setPage] = useState(1);
+        const [pageSize, setPageSize] = useState(5);
+
+        const sorted = useMemo(() => sortRows(rows, sorting), [sorting]);
+        const totalPages = Math.max(1, Math.ceil(sorted.length / pageSize));
+        const safePage = Math.min(page, totalPages);
+        const start = (safePage - 1) * pageSize;
+        const pagedRows = sorted.slice(start, start + pageSize);
+
+        return (
+            <UsersTable
+                data={pagedRows}
+                sorting={sorting}
+                onSortChange={(field) => {
+                    setPage(1);
+                    setSorting((prev) => {
+                        if (!prev || prev.field !== field) {
+                            return { field, direction: 'asc' };
+                        }
+                        if (prev.direction === 'asc') {
+                            return { field, direction: 'desc' };
+                        }
+                        return null;
+                    });
+                }}
+                pagination={{
+                    page: safePage,
+                    pageSize,
+                    total: sorted.length,
+                    totalPages,
+                    onPageChange: setPage,
+                    onPageSizeChange: (next) => {
+                        setPage(1);
+                        setPageSize(next);
+                    },
+                }}
+            />
+        );
+    },
+};

src/components/Table.tsx

@@ -1,5 +1,11 @@
 import type { ReactNode } from 'react';
-import { ArrowPathIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon } from '@heroicons/react/24/solid';
+import {
+    ArrowPathIcon,
+    ChevronDownIcon,
+    ChevronLeftIcon,
+    ChevronRightIcon,
+    ChevronUpIcon,
+} from '@heroicons/react/24/solid';
 import { ArrowsUpDownIcon } from '@heroicons/react/24/outline';
 import { Button } from './Button';
 import { Dropdown } from './Dropdown';
@@ -46,7 +52,7 @@ export function Table<T>({
     className = '',
     sorting = null,
     onSortChange,
-  pagination
+    pagination,
 }: Readonly<TableProps<T>>) {
     const canGoPrev = pagination != null && pagination.page > 1;
     const canGoNext = pagination != null && pagination.page < pagination.totalPages;
@@ -58,24 +64,34 @@ export function Table<T>({
                     <thead className="table-head">
                         <tr>
                             {headers.map((header) => {
-                const canSort = header.sortable === true
+                                const canSort =
-                  && typeof onSortChange === 'function'
+                                    header.sortable === true &&
-                  && typeof header.sortField === 'string'
+                                    typeof onSortChange === 'function' &&
-                  && header.sortField.length > 0;
+                                    typeof header.sortField === 'string' &&
+                                    header.sortField.length > 0;
                                 const isActiveSort = canSort && sorting?.field === header.sortField;
                                 const sortDirection = isActiveSort ? sorting?.direction : null;
 
                                 return (
-                  <th key={header.id} className={`table-head-cell ${header.headerClassName ?? ''}`.trim()}>
+                                    <th
+                                        key={header.id}
+                                        className={`table-head-cell ${header.headerClassName ?? ''}`.trim()}
+                                    >
                                         {canSort ? (
                                             <button
                                                 type="button"
                                                 className="table-sort-button"
-                        onClick={() => onSortChange(header.sortField as string)}
+                                                onClick={() =>
+                                                    onSortChange(header.sortField as string)
+                                                }
                                                 aria-label={`Sort by ${header.label}`}
                                             >
                                                 <span>{header.label}</span>
-                        <span className="table-sort-icon" aria-hidden="true" data-sort-state={sortDirection ?? 'none'}>
+                                                <span
+                                                    className="table-sort-icon"
+                                                    aria-hidden="true"
+                                                    data-sort-state={sortDirection ?? 'none'}
+                                                >
                                                     {sortDirection === 'asc' ? (
                                                         <ChevronUpIcon className="h-4 w-4" />
                                                     ) : null}
@@ -99,8 +115,15 @@ export function Table<T>({
                         {isLoading ? (
                             <tr className="table-body-row">
                                 <td colSpan={headers.length} className="px-4 py-6 text-center">
-                  <Label as="span" variant="body2" className="inline-flex items-center justify-center ui-loading">
+                                    <Label
-                    <ArrowPathIcon className="h-5 w-5 animate-spin" aria-hidden="true" />
+                                        as="span"
+                                        variant="body2"
+                                        className="inline-flex items-center justify-center ui-loading"
+                                    >
+                                        <ArrowPathIcon
+                                            className="h-5 w-5 animate-spin"
+                                            aria-hidden="true"
+                                        />
                                     </Label>
                                 </td>
                             </tr>
@@ -114,14 +137,19 @@ export function Table<T>({
                                 </td>
                             </tr>
                         ) : null}
-            {!isLoading && data.map((row, index) => (
+                        {!isLoading &&
+                            data.map((row, index) => (
                                 <tr key={rowKey(row, index)} className="table-body-row">
                                     {headers.map((header) => {
-                  const content = typeof header.value === 'function'
+                                        const content =
+                                            typeof header.value === 'function'
                                                 ? (header.value as (item: T) => ReactNode)(row)
                                                 : header.value;
                                         return (
-                    <td key={`${header.id}-${index}`} className={`table-cell-secondary ${header.cellClassName ?? ''}`.trim()}>
+                                            <td
+                                                key={`${header.id}-${index}`}
+                                                className={`table-cell-secondary ${header.cellClassName ?? ''}`.trim()}
+                                            >
                                                 {content}
                                             </td>
                                         );
@@ -133,9 +161,7 @@ export function Table<T>({
             </div>
             {pagination ? (
                 <div className="flex flex-col gap-3 border-t border-zinc-500/20 px-4 py-3 sm:flex-row sm:items-center sm:justify-between">
-          <Label variant="body2">
+                    <Label variant="body2">{pagination.total} results</Label>
-            {pagination.total} results
-          </Label>
                     <div className="flex flex-wrap items-center gap-2">
                         {pagination.onPageSizeChange ? (
                             <Dropdown
@@ -143,7 +169,7 @@ export function Table<T>({
                                 value={String(pagination.pageSize)}
                                 choices={[5, 10, 20, 50, 100].map((size) => ({
                                     id: String(size),
-                  label: String(size)
+                                    label: String(size),
                                 }))}
                                 size="sm"
                                 layout="inline"

src/index.ts

@@ -1,5 +1,6 @@
 export { Button } from './components/Button';
 export { Chip } from './components/Chip';
+export { DatePicker } from './components/DatePicker';
 export { Dropdown } from './components/Dropdown';
 export { Form } from './components/Form';
 export { InputField } from './components/InputField';
@@ -8,5 +9,6 @@ export { SidebarNavItem } from './components/SidebarNavItem';
 export { Table } from './components/Table';
 
 export type { TableHeader } from './components/Table';
+export type { DatePickerProps } from './components/DatePicker';
 export type { ComponentSize } from './components/types';
 export type { SortDirection, SortState } from './types/sort';

src/styles/base.css

@@ -1,6 +1,12 @@
 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
 
 :root {
+    /* Consumer projects can override these accent tokens after importing @panic/web-ui styles. */
+    --accent-300: 168 155 191;
+    --accent-400: 149 135 173;
+    --accent-500: 125 111 152;
+    --accent-600: 106 93 132;
+    --accent-contrast: 255 255 255;
     --bg-page: #16121a;
     --surface-bg: rgba(24, 24, 27, 0.45);
     --surface-bg-strong: rgba(24, 24, 27, 0.62);
@@ -33,8 +39,8 @@
     --error-border: rgba(252, 165, 165, 0.3);
     --error-bg: rgba(239, 68, 68, 0.1);
     --error-text: #fecaca;
-  --mdx-link: #7d6f98;
+    --mdx-link: rgb(var(--accent-500));
-  --mdx-link-hover: #9587ad;
+    --mdx-link-hover: rgb(var(--accent-400));
     --mdx-inline-code-bg: #27272a;
     --mdx-inline-code-border: #3f3f46;
     --mdx-codeblock-bg: #18181b;
@@ -42,8 +48,8 @@
     --mdx-codeblock-text: #e4e4e7;
     --mdx-codeblock-gutter: #a1a1aa;
     --mdx-codeblock-active: #27272a;
-  --mdx-codeblock-selection: rgba(125, 111, 152, 0.35);
+    --mdx-codeblock-selection: rgb(var(--accent-500) / 0.35);
-  --mdx-codeblock-bracket: rgba(125, 111, 152, 0.45);
+    --mdx-codeblock-bracket: rgb(var(--accent-500) / 0.45);
     --shadow-glow: 0 0 0 1px rgba(63, 63, 70, 0.65), 0 18px 44px rgba(0, 0, 0, 0.45);
 }
 
@@ -78,8 +84,8 @@
     --error-border: rgba(248, 113, 113, 0.35);
     --error-bg: rgba(254, 226, 226, 0.8);
     --error-text: #991b1b;
-  --mdx-link: #7d6f98;
+    --mdx-link: rgb(var(--accent-500));
-  --mdx-link-hover: #6a5d84;
+    --mdx-link-hover: rgb(var(--accent-600));
     --mdx-inline-code-bg: #f4f4f5;
     --mdx-inline-code-border: #d4d4d8;
     --mdx-codeblock-bg: #ffffff;
@@ -87,8 +93,7 @@
     --mdx-codeblock-text: #18181b;
     --mdx-codeblock-gutter: #71717a;
     --mdx-codeblock-active: #f4f4f5;
-  --mdx-codeblock-selection: rgba(125, 111, 152, 0.22);
+    --mdx-codeblock-selection: rgb(var(--accent-500) / 0.22);
-  --mdx-codeblock-bracket: rgba(125, 111, 152, 0.32);
+    --mdx-codeblock-bracket: rgb(var(--accent-500) / 0.32);
     --shadow-glow: 0 0 0 1px rgba(212, 212, 216, 0.9), 0 18px 36px rgba(15, 23, 42, 0.08);
 }
-

src/styles/components.css

@@ -9,7 +9,15 @@
     border: 1px solid var(--field-border);
     background-color: var(--field-bg);
     color: var(--text-primary);
-  @apply w-full rounded-xl px-3 py-2 text-sm outline-none transition focus:border-accent-400 focus:ring-2 focus:ring-accent-400/30;
+    appearance: none;
+    -webkit-appearance: none;
+    -webkit-text-fill-color: var(--text-primary);
+    @apply w-full rounded-xl px-3 py-2 text-sm outline-none transition;
+}
+
+.field:focus {
+    border-color: rgb(var(--accent-400));
+    box-shadow: 0 0 0 2px rgb(var(--accent-400) / 0.3);
 }
 
 .field::placeholder {
@@ -20,12 +28,19 @@
     border-color: var(--field-disabled-border);
     background-color: var(--field-disabled-bg);
     color: var(--field-disabled-text);
+    -webkit-text-fill-color: var(--field-disabled-text);
 }
 
 .field:disabled::placeholder {
     color: var(--field-disabled-placeholder);
 }
 
+.btn-solid:disabled,
+.btn-outlined:disabled,
+.btn-noborder:disabled {
+    opacity: 1;
+}
+
 .btn-solid,
 .btn-outlined,
 .btn-noborder {
@@ -45,7 +60,13 @@
 }
 
 .btn-solid.btn-primary {
-  @apply bg-accent-500 text-white hover:bg-accent-400 disabled:opacity-100;
+    background-color: rgb(var(--accent-500));
+    color: rgb(var(--accent-contrast));
+    @apply disabled:opacity-100;
+}
+
+.btn-solid.btn-primary:hover {
+    background-color: rgb(var(--accent-400));
 }
 
 .btn-solid.btn-primary:disabled {
@@ -97,16 +118,19 @@
 }
 
 .btn-outlined.btn-primary {
-  @apply border-accent-500 text-accent-300;
+    border-color: rgb(var(--accent-500));
+    color: rgb(var(--accent-300));
     background-color: transparent;
 }
 
 .btn-outlined.btn-primary:hover {
-  @apply bg-accent-500/15 text-accent-300;
+    background-color: rgb(var(--accent-500) / 0.15);
+    color: rgb(var(--accent-300));
 }
 
 .btn-outlined.btn-primary:disabled {
-  @apply border-accent-500/40 text-accent-300/60;
+    border-color: rgb(var(--accent-500) / 0.4);
+    color: rgb(var(--accent-300) / 0.6);
     background-color: transparent;
 }
 
@@ -139,16 +163,17 @@
 }
 
 .btn-noborder.btn-primary {
-  @apply text-accent-300;
+    color: rgb(var(--accent-300));
     background-color: transparent;
 }
 
 .btn-noborder.btn-primary:hover {
-  @apply bg-accent-500/15 text-accent-300;
+    background-color: rgb(var(--accent-500) / 0.15);
+    color: rgb(var(--accent-300));
 }
 
 .btn-noborder.btn-primary:disabled {
-  @apply text-accent-300/60;
+    color: rgb(var(--accent-300) / 0.6);
     background-color: transparent;
 }
 
@@ -218,45 +243,31 @@
     color: var(--error-text);
 }
 
+.ui-accent-active {
+    background-color: rgb(var(--accent-500));
+    color: rgb(var(--accent-contrast));
+}
+
+.ui-accent-active:hover {
+    background-color: rgb(var(--accent-400));
+}
+
 .chip-root {
     @apply inline-flex items-center rounded-full border px-2.5 py-1 text-xs font-semibold leading-none;
 }
 
 .chip-solid {
-  color: #ffffff;
-}
-
-.chip-outlined {
-  background-color: transparent;
-}
-
-.chip-neutral.chip-solid {
     border-color: var(--ghost-border);
     background-color: var(--ghost-border);
     color: var(--text-primary);
 }
 
-.chip-neutral.chip-outlined {
+.chip-outlined {
+    background-color: transparent;
     border-color: var(--ghost-border);
     color: var(--text-secondary);
 }
 
-.chip-indigo.chip-solid {
-  @apply border-indigo-700 bg-indigo-700 text-white;
-}
-
-.chip-indigo.chip-outlined {
-  @apply border-indigo-700 text-indigo-300;
-}
-
-.chip-cyan.chip-solid {
-  @apply border-cyan-700 bg-cyan-700 text-white;
-}
-
-.chip-cyan.chip-outlined {
-  @apply border-cyan-700 text-cyan-300;
-}
-
 .alert-error {
     border: 1px solid var(--error-border);
     background-color: var(--error-bg);
@@ -310,4 +321,3 @@
     color: var(--text-secondary);
     @apply px-4 py-3 text-sm;
 }
-

tailwind-preset.cjs

@@ -7,15 +7,15 @@ module.exports = {
                     300: '#a89bbf',
                     400: '#9587ad',
                     500: '#7d6f98',
-          600: '#6a5d84'
+                    600: '#6a5d84',
-        }
+                },
             },
             fontFamily: {
-        sans: ['Inter', 'ui-sans-serif', 'system-ui', 'sans-serif']
+                sans: ['Inter', 'ui-sans-serif', 'system-ui', 'sans-serif'],
             },
             boxShadow: {
-        glow: '0 0 0 1px rgba(63,63,70,0.65), 0 18px 44px rgba(0,0,0,0.45)'
+                glow: '0 0 0 1px rgba(63,63,70,0.65), 0 18px 44px rgba(0,0,0,0.45)',
-      }
+            },
-    }
+        },
-  }
+    },
 };

tailwind.build.config.cjs

@@ -3,14 +3,12 @@ const webUiPreset = require('./tailwind-preset.cjs');
 /** @type {import('tailwindcss').Config} */
 module.exports = {
     presets: [webUiPreset],
-  content: [
+    content: ['./src/**/*.{ts,tsx,js,jsx}'],
-    './src/**/*.{ts,tsx,js,jsx}'
-  ],
     corePlugins: {
-    preflight: false
+        preflight: false,
     },
     theme: {
-    extend: {}
+        extend: {},
     },
-  plugins: []
+    plugins: [],
 };

tailwind.storybook.config.cjs

@@ -0,0 +1,11 @@
+const webUiPreset = require('./tailwind-preset.cjs');
+
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+    presets: [webUiPreset],
+    content: ['./src/**/*.{ts,tsx,js,jsx,mdx}', './.storybook/**/*.{ts,tsx,js,jsx,mdx}'],
+    theme: {
+        extend: {},
+    },
+    plugins: [],
+};

tsconfig.build.json

@@ -8,5 +8,6 @@
         "outDir": "dist",
         "declarationMap": true
     },
-  "include": ["src"]
+    "include": ["src"],
+    "exclude": ["src/**/*.stories.ts", "src/**/*.stories.tsx"]
 }

vite.config.ts

@@ -8,11 +8,14 @@ export default defineConfig({
         lib: {
             entry: {
                 index: resolve(__dirname, 'src/index.ts'),
-        'components/MDXEditorField': resolve(__dirname, 'src/components/MDXEditorField.tsx')
+                'components/MDXEditorField': resolve(
+                    __dirname,
+                    'src/components/MDXEditorField.tsx',
+                ),
             },
             name: 'PanicWebUi',
             formats: ['es'],
-      fileName: (_format, entryName) => `${entryName}.js`
+            fileName: (_format, entryName) => `${entryName}.js`,
         },
         rollupOptions: {
             external: [
@@ -20,8 +23,8 @@ export default defineConfig({
                 'react-dom',
                 'react-router-dom',
                 '@heroicons/react',
-        '@mdxeditor/editor'
+                '@mdxeditor/editor',
-      ]
+            ],
-    }
+        },
-  }
+    },
 });