Accordion
+
}
diff --git a/docs/app/components/server/avatar/description.md b/docs/app/components/server/avatar/description.md
deleted file mode 100644
index 347d36893e..0000000000
--- a/docs/app/components/server/avatar/description.md
+++ /dev/null
@@ -1 +0,0 @@
-The Avatar component is typically used to display images, icons, or initials representing people or other entities.
diff --git a/docs/app/components/server/avatar/examples/Active.tsx b/docs/app/components/server/avatar/examples/Active.tsx
deleted file mode 100644
index 054d532fd2..0000000000
--- a/docs/app/components/server/avatar/examples/Active.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import Avatar from '@heathmont/moon-core-tw/lib/es/avatar/Avatar';
-import { GenericUser } from '@heathmont/moon-icons-tw';
-
-export const Active = () => (
- <>
-
-
-
-
-
- md
-
-
-
-
-
- >
-);
diff --git a/docs/app/components/server/avatar/examples/Default.tsx b/docs/app/components/server/avatar/examples/Default.tsx
deleted file mode 100644
index 56062a94aa..0000000000
--- a/docs/app/components/server/avatar/examples/Default.tsx
+++ /dev/null
@@ -1,8 +0,0 @@
-import Avatar from '@heathmont/moon-core-tw/lib/es/avatar/Avatar';
-import { GenericUser } from '@heathmont/moon-icons-tw';
-
-export const Default = () => {
- return
-
-
-};
diff --git a/docs/app/components/server/avatar/page.tsx b/docs/app/components/server/avatar/page.tsx
deleted file mode 100644
index 9cc2938a33..0000000000
--- a/docs/app/components/server/avatar/page.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import { Active } from "@/app/components/server/avatar/examples/Active";
-import { Default } from "@/app/components/server/avatar/examples/Default";
-import { getExamples } from "@/app/utils/getExamples";
-import { MDX } from "@/components/MDX";
-
-
-export default async function Home() {
- const { server } = await getExamples();
-
- return (
-
-
Avatar
-
-
-
-
-
Default
-
-
-
-
{server.avatar.examples.Default}
-
-
-
-
Active
-
-
{server.avatar.examples.Active}
-
-
- )
-}
-
diff --git a/docs/app/components/server/button/description.md b/docs/app/components/server/button/description.md
new file mode 100644
index 0000000000..64d6721bd3
--- /dev/null
+++ b/docs/app/components/server/button/description.md
@@ -0,0 +1,8 @@
+Buttons allow users to take actions, and make choices, with a single tap.
+
+Buttons communicate actions that users can take. They are typically placed throughout your UI, in places like:
+
+Modal windows
+Forms
+Cards
+Toolbars
diff --git a/docs/app/components/server/button/examples/Animations.tsx b/docs/app/components/server/button/examples/Animations.tsx
new file mode 100644
index 0000000000..ef9b623977
--- /dev/null
+++ b/docs/app/components/server/button/examples/Animations.tsx
@@ -0,0 +1,18 @@
+import Button from '@heathmont/moon-base-tw/lib/button/Button';
+
+export const Animations = () => (
+ <>
+
+ Progress
+
+
+ Success
+
+
+ Error
+
+
+ Pulse
+
+ >
+);
diff --git a/docs/app/components/server/button/examples/Default.tsx b/docs/app/components/server/button/examples/Default.tsx
new file mode 100644
index 0000000000..d2bffc8e77
--- /dev/null
+++ b/docs/app/components/server/button/examples/Default.tsx
@@ -0,0 +1,3 @@
+import Button from '@heathmont/moon-base-tw/lib/button/Button';
+
+export const Default = () =>
Default ;
diff --git a/docs/app/components/server/button/examples/Disabled.tsx b/docs/app/components/server/button/examples/Disabled.tsx
new file mode 100644
index 0000000000..163423deab
--- /dev/null
+++ b/docs/app/components/server/button/examples/Disabled.tsx
@@ -0,0 +1,3 @@
+import Button from '@heathmont/moon-base-tw/lib/button/Button';
+
+export const Disabled = () =>
Disabled ;
diff --git a/docs/app/components/server/button/examples/FullWidth.tsx b/docs/app/components/server/button/examples/FullWidth.tsx
new file mode 100644
index 0000000000..6ab181403e
--- /dev/null
+++ b/docs/app/components/server/button/examples/FullWidth.tsx
@@ -0,0 +1,8 @@
+import Button from '@heathmont/moon-base-tw/lib/button/Button';
+import { OtherFrame } from '@heathmont/moon-icons-tw';
+
+export const FullWidth = () => (
+
} fullWidth>
+ Full width
+
+);
diff --git a/docs/app/components/server/button/examples/Icons.tsx b/docs/app/components/server/button/examples/Icons.tsx
new file mode 100644
index 0000000000..33c832b146
--- /dev/null
+++ b/docs/app/components/server/button/examples/Icons.tsx
@@ -0,0 +1,9 @@
+import Button from '@heathmont/moon-base-tw/lib/button/Button';
+import { OtherFrame } from '@heathmont/moon-icons-tw';
+
+export const Icons = () => (
+ <>
+
}>IconLeft
+
}>IconRight
+ >
+);
diff --git a/docs/app/components/server/button/examples/Multiline.tsx b/docs/app/components/server/button/examples/Multiline.tsx
new file mode 100644
index 0000000000..526b9889b6
--- /dev/null
+++ b/docs/app/components/server/button/examples/Multiline.tsx
@@ -0,0 +1,12 @@
+import Button from '@heathmont/moon-base-tw/lib/button/Button';
+
+export const Multiline = () => (
+
+
+ Button text
+
+ Placeholder text
+
+
+
+);
diff --git a/docs/app/components/server/button/examples/Sizes.tsx b/docs/app/components/server/button/examples/Sizes.tsx
new file mode 100644
index 0000000000..95831ea1ed
--- /dev/null
+++ b/docs/app/components/server/button/examples/Sizes.tsx
@@ -0,0 +1,11 @@
+import Button from '@heathmont/moon-base-tw/lib/button/Button';
+
+export const Sizes = () => (
+ <>
+
Size XS
+
Size SM
+
Default size MD
+
Size LG
+
Size XL
+ >
+);
diff --git a/docs/app/components/server/button/examples/Variants.tsx b/docs/app/components/server/button/examples/Variants.tsx
new file mode 100644
index 0000000000..df384a83b9
--- /dev/null
+++ b/docs/app/components/server/button/examples/Variants.tsx
@@ -0,0 +1,9 @@
+import Button from '@heathmont/moon-base-tw/lib/button/Button';
+
+export const Variants = () => (
+ <>
+
Default is Fill
+
Outline
+
Ghost
+ >
+);
diff --git a/docs/app/components/server/button/page.tsx b/docs/app/components/server/button/page.tsx
new file mode 100644
index 0000000000..dc88a8f0f4
--- /dev/null
+++ b/docs/app/components/server/button/page.tsx
@@ -0,0 +1,64 @@
+import { Animations } from '@/app/components/server/button/examples/Animations';
+import { Default } from '@/app/components/server/button/examples/Default';
+import { Disabled } from '@/app/components/server/button/examples/Disabled';
+import { FullWidth } from '@/app/components/server/button/examples/FullWidth';
+import { Icons } from '@/app/components/server/button/examples/Icons';
+import { Multiline } from '@/app/components/server/button/examples/Multiline';
+import { Sizes } from '@/app/components/server/button/examples/Sizes';
+import { Variants } from '@/app/components/server/button/examples/Variants';
+import ExampleSection from '@/app/components/shared/ExampleSection';
+import QuickNav from '@/app/components/shared/QuickNav';
+import { getExamples } from '@/app/utils/getExamples';
+import { MDX } from '@/components/MDX';
+
+export default async function Home() {
+ const { server } = await getExamples();
+ const examplesList = Object.keys(server.button.examples);
+ return (
+
+
Button
+
+
+ }
+ code={server.button.examples.Default}
+ />
+ }
+ code={server.button.examples.Sizes}
+ />
+ }
+ code={server.button.examples.Variants}
+ />
+ }
+ code={server.button.examples.Icons}
+ />
+ }
+ code={server.button.examples.FullWidth}
+ />
+ }
+ code={server.button.examples.Disabled}
+ />
+ }
+ code={server.button.examples.Animations}
+ />
+ }
+ code={server.button.examples.Multiline}
+ />
+
+ );
+}
diff --git a/docs/app/components/server/checkbox/description.md b/docs/app/components/server/checkbox/description.md
new file mode 100644
index 0000000000..c376928764
--- /dev/null
+++ b/docs/app/components/server/checkbox/description.md
@@ -0,0 +1,3 @@
+The checkbox is shown as a square box that is ticked (checked) when activated.
+
+Checkboxes are used to let a user select one or more options of a limited number of choices.
diff --git a/docs/app/components/server/checkbox/examples/Default.tsx b/docs/app/components/server/checkbox/examples/Default.tsx
new file mode 100644
index 0000000000..5534f0b399
--- /dev/null
+++ b/docs/app/components/server/checkbox/examples/Default.tsx
@@ -0,0 +1,5 @@
+import Checkbox from '@heathmont/moon-base-tw/lib/checkbox/Checkbox';
+
+export const Default = () =>
;
+
+export default Default;
diff --git a/docs/app/components/server/checkbox/page.tsx b/docs/app/components/server/checkbox/page.tsx
new file mode 100644
index 0000000000..74ea2d5e6f
--- /dev/null
+++ b/docs/app/components/server/checkbox/page.tsx
@@ -0,0 +1,22 @@
+import { Default } from '@/app/components/server/checkbox/examples/Default';
+import ExampleSection from '@/app/components/shared/ExampleSection';
+import QuickNav from '@/app/components/shared/QuickNav';
+import { getExamples } from '@/app/utils/getExamples';
+import { MDX } from '@/components/MDX';
+
+export default async function Home() {
+ const { server } = await getExamples();
+ const examplesList = Object.keys(server.checkbox.examples);
+ return (
+
+
Checkbox
+
+
+ }
+ code={server.checkbox.examples.Default}
+ />
+
+ );
+}
diff --git a/docs/app/components/shared/ExampleSection.tsx b/docs/app/components/shared/ExampleSection.tsx
index 6dd6842360..937f41ac13 100644
--- a/docs/app/components/shared/ExampleSection.tsx
+++ b/docs/app/components/shared/ExampleSection.tsx
@@ -9,7 +9,7 @@ type Props = {
const ExampleSection = async ({ title, component, code }: Props) => (
-
{title}
+ {title}
diff --git a/docs/app/components/shared/QuickNav.tsx b/docs/app/components/shared/QuickNav.tsx
new file mode 100644
index 0000000000..b6fe5e45dc
--- /dev/null
+++ b/docs/app/components/shared/QuickNav.tsx
@@ -0,0 +1,11 @@
+const QuickNav = ({ items }: { items: string[] }) => (
+
+ {items.map((item) => (
+
+ {item}
+
+ ))}
+
+);
+
+export default QuickNav;
diff --git a/docs/app/components/types.ts b/docs/app/components/types.ts
index 78b6b6f4ae..d3a9f5e9ea 100644
--- a/docs/app/components/types.ts
+++ b/docs/app/components/types.ts
@@ -17,16 +17,28 @@ export interface Examples {
accordion: {
description: 'string';
examples: {
+ ContentOutsideSizes: 'string';
Default: 'string';
Disabled: 'string';
Sizes: 'string';
- ContentOutsideSizes: 'string';
};
};
- avatar: {
+ button: {
+ description: 'string';
+ examples: {
+ Default: 'string';
+ Sizes: 'string';
+ Variants: 'string';
+ Icons: 'string';
+ FullWidth: 'string';
+ Disabled: 'string';
+ Animations: 'string';
+ Multiline: 'string';
+ };
+ };
+ checkbox: {
description: 'string';
examples: {
- Active: 'string';
Default: 'string';
};
};
@@ -37,4 +49,10 @@ export interface Examples {
};
};
};
+ shared: {
+ fonts: {
+ 'DMSans-Regular': 'string';
+ 'DMSans-Semibold': 'string';
+ };
+ };
}
diff --git a/docs/app/page.tsx b/docs/app/page.tsx
index 62b0fa044f..de2b125ef9 100644
--- a/docs/app/page.tsx
+++ b/docs/app/page.tsx
@@ -1,23 +1,34 @@
+import Link from 'next/link'
import { getExamples } from "./utils/getExamples";
-import { MDX } from "@/components/MDX";
-import { CommandMenu } from "@/components/Search";
export default async function Home() {
- const examples = await getExamples();
-
- const items = [
- { label: "Aurum" },
- { label: "Argentum" },
- { label: "Zink" },
- { label: "Plumbum" },
- { label: "Test" }
- ];
+ const { server, client } = await getExamples();
return (
-
- Moon Design System
-
-
+
+
Moon Design System
+
+
+
Server components
+
+ {Object.entries(server).map(([key, _value]) => (
+
+ {key}
+
+ ))}
+
+
+
+
+
Client components
+
+ {Object.entries(client).map(([key, _value]) => (
+
+ {key}
+
+ ))}
+
+
)
}
diff --git a/docs/package.json b/docs/package.json
index 44b0ba0de5..ac38deae74 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -1,6 +1,6 @@
{
"name": "docs",
- "version": "10.10.1",
+ "version": "10.10.2",
"private": true,
"type": "module",
"scripts": {
@@ -11,11 +11,11 @@
"lint": "next lint"
},
"dependencies": {
- "@heathmont/moon-base-tw": "workspace:^10.10.1",
- "@heathmont/moon-cmdk-tw": "workspace:^10.10.1",
- "@heathmont/moon-core-tw": "workspace:^10.10.1",
- "@heathmont/moon-themes-tw": "workspace:^10.10.1",
+ "@heathmont/moon-base-tw": "workspace:^10.10.2",
+ "@heathmont/moon-cmdk-tw": "workspace:^10.10.2",
+ "@heathmont/moon-core-tw": "workspace:^10.10.2",
"@heathmont/moon-icons-tw": "9.28.6",
+ "@heathmont/moon-themes-tw": "workspace:^10.10.2",
"@types/node": "20.4.9",
"@types/react": "18.2.19",
"@types/react-dom": "18.2.7",
diff --git a/next-docs/CHANGELOG.md b/next-docs/CHANGELOG.md
index 2190150728..56aeb40386 100644
--- a/next-docs/CHANGELOG.md
+++ b/next-docs/CHANGELOG.md
@@ -1,5 +1,16 @@
# Change Log
+## 10.10.2
+
+### Patch Changes
+
+- Deploy 10.10.2
+- Updated dependencies
+ - @heathmont/moon-table-tw@10.10.2
+ - @heathmont/moon-themes-tw@10.10.2
+ - @heathmont/moon-cmdk-tw@10.10.2
+ - @heathmont/moon-core-tw@10.10.2
+
## 10.10.1
### Patch Changes
diff --git a/next-docs/package.json b/next-docs/package.json
index 6a8de91132..b5a7344da8 100644
--- a/next-docs/package.json
+++ b/next-docs/package.json
@@ -1,6 +1,6 @@
{
"name": "next-docs",
- "version": "10.10.1",
+ "version": "10.10.2",
"private": true,
"scripts": {
"dev": "next dev",
@@ -19,9 +19,9 @@
"@heathmont/moon-assets": "workspace:^10.7.1",
"@heathmont/moon-charts": "workspace:^10.7.1",
"@heathmont/moon-components": "workspace:^10.7.1",
- "@heathmont/moon-cmdk-tw": "workspace:^10.10.1",
+ "@heathmont/moon-cmdk-tw": "workspace:^10.10.2",
"@heathmont/moon-core": "workspace:^10.7.1",
- "@heathmont/moon-core-tw": "workspace:^10.10.1",
+ "@heathmont/moon-core-tw": "workspace:^10.10.2",
"@heathmont/moon-datepicker": "workspace:^10.7.1",
"@heathmont/moon-draggabletable": "workspace:^10.7.1",
"@heathmont/moon-icons": "workspace:^10.7.1",
@@ -30,9 +30,9 @@
"@heathmont/moon-select": "workspace:^10.7.1",
"@heathmont/moon-sidebar": "workspace:^10.7.1",
"@heathmont/moon-table": "workspace:^10.7.1",
- "@heathmont/moon-table-tw": "workspace:^10.10.1",
+ "@heathmont/moon-table-tw": "workspace:^10.10.2",
"@heathmont/moon-themes": "workspace:^10.7.1",
- "@heathmont/moon-themes-tw": "workspace:^10.10.1",
+ "@heathmont/moon-themes-tw": "workspace:^10.10.2",
"@heathmont/moon-utils": "workspace:^10.7.1",
"@heathmont/moon-icons-tw": "9.28.6",
"@hookform/resolvers": "3.2.0",
diff --git a/next-docs/pages/components/input.tsx b/next-docs/pages/components/input.tsx
index 35527ecd09..2234263080 100644
--- a/next-docs/pages/components/input.tsx
+++ b/next-docs/pages/components/input.tsx
@@ -4,6 +4,7 @@ import type { ComponentNames } from '../../components/getComponent';
import Layout from '../../components/Layout';
import PropsTable from '../../components/PropsTable';
import Bg from '../../public/examples/input/Bg';
+import Controled from '../../public/examples/input/Controled';
import Default from '../../public/examples/input/Default';
import Sizes from '../../public/examples/input/Sizes';
import States from '../../public/examples/input/States';
@@ -54,6 +55,11 @@ const PageInput = () => {
preview={
}
code={examples ? examples.Types : 'Loading'}
/>
+
}
+ code={examples ? examples.Controled : 'Loading'}
+ />
{
code={examples ? examples.DeepTable : 'Loading'}
/>
}
code={examples ? examples.ExpandedWithModals : 'Loading'}
/>
+ }
+ code={examples ? examples.ExpandableCheckboxes : 'Loading'}
+ />
}
diff --git a/next-docs/public/examples/combobox/__tests__/__snapshots__/index.test.tsx.snap b/next-docs/public/examples/combobox/__tests__/__snapshots__/index.test.tsx.snap
index b46d1af74d..675bc98288 100644
--- a/next-docs/public/examples/combobox/__tests__/__snapshots__/index.test.tsx.snap
+++ b/next-docs/public/examples/combobox/__tests__/__snapshots__/index.test.tsx.snap
@@ -21,7 +21,7 @@ Object {
Select label
@@ -378,7 +378,7 @@ Object {
Select label
@@ -506,7 +506,7 @@ Object {
Label
@@ -577,7 +577,7 @@ Object {
Label
@@ -705,7 +705,7 @@ Object {
Error
@@ -765,7 +765,7 @@ Object {
Disabled
@@ -828,7 +828,7 @@ Object {
aria-autocomplete="list"
aria-expanded="false"
aria-label="Without placeholder"
- class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none input-xl pt-3 input-xl-dt-label text-moon-16 leading-5"
+ class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err rounded-moon-i-sm input-dt-shared flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none input-xl pt-3 input-xl-dt-label text-moon-16 leading-5"
data-headlessui-state=""
id="headlessui-combobox-input-:r2l:"
placeholder=""
@@ -837,7 +837,7 @@ Object {
value=""
/>
Without placeholder (nullable)
@@ -888,7 +888,7 @@ Object {
List options width
@@ -959,7 +959,7 @@ Object {
Error
@@ -1019,7 +1019,7 @@ Object {
Disabled
@@ -1082,7 +1082,7 @@ Object {
aria-autocomplete="list"
aria-expanded="false"
aria-label="Without placeholder"
- class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none input-xl pt-3 input-xl-dt-label text-moon-16 leading-5"
+ class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err rounded-moon-i-sm input-dt-shared flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none input-xl pt-3 input-xl-dt-label text-moon-16 leading-5"
data-headlessui-state=""
id="headlessui-combobox-input-:r2l:"
placeholder=""
@@ -1091,7 +1091,7 @@ Object {
value=""
/>
Without placeholder (nullable)
@@ -1142,7 +1142,7 @@ Object {
List options width
@@ -1267,7 +1267,7 @@ Object {
Select label
@@ -3382,7 +3382,7 @@ Object {
Select label
@@ -3506,7 +3506,7 @@ Object {
Label
@@ -3573,7 +3573,7 @@ Object {
Label
@@ -3697,7 +3697,7 @@ Object {
Error
@@ -3757,7 +3757,7 @@ Object {
Disabled
@@ -3820,7 +3820,7 @@ Object {
aria-autocomplete="list"
aria-expanded="false"
aria-label="Without placeholder"
- class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none input-xl pt-3 input-xl-dt-label text-moon-16 leading-5"
+ class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err rounded-moon-i-sm input-dt-shared flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none input-xl pt-3 input-xl-dt-label text-moon-16 leading-5"
data-headlessui-state=""
id="headlessui-combobox-input-:rh:"
placeholder=""
@@ -3829,7 +3829,7 @@ Object {
value=""
/>
Without placeholder (nullable)
@@ -3880,7 +3880,7 @@ Object {
List options width
@@ -3947,7 +3947,7 @@ Object {
Error
@@ -4007,7 +4007,7 @@ Object {
Disabled
@@ -4070,7 +4070,7 @@ Object {
aria-autocomplete="list"
aria-expanded="false"
aria-label="Without placeholder"
- class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none input-xl pt-3 input-xl-dt-label text-moon-16 leading-5"
+ class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err rounded-moon-i-sm input-dt-shared flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none input-xl pt-3 input-xl-dt-label text-moon-16 leading-5"
data-headlessui-state=""
id="headlessui-combobox-input-:rh:"
placeholder=""
@@ -4079,7 +4079,7 @@ Object {
value=""
/>
Without placeholder (nullable)
@@ -4130,7 +4130,7 @@ Object {
List options width
@@ -4251,7 +4251,7 @@ Object {
@@ -44,7 +44,7 @@ Object {
Email
@@ -213,7 +213,7 @@ Object {
Password
@@ -268,7 +268,7 @@ Object {
Username
@@ -289,7 +289,7 @@ Object {
Email
@@ -458,7 +458,7 @@ Object {
Password
@@ -567,11 +567,11 @@ Object {
class="w-full max-w-full relative bg-goku rounded-moon-s-xs [&_input]:rounded-moon-s-xs [&_input:focus]:rounded-moon-s-xs [&_input:hover]:rounded-moon-s-xs"
>
Username
@@ -590,11 +590,11 @@ Object {
class="w-full max-w-full relative bg-goku rounded-moon-s-xs [&_input]:rounded-moon-s-xs [&_input:focus]:rounded-moon-s-xs [&_input:hover]:rounded-moon-s-xs"
>
Email
@@ -607,11 +607,11 @@ Object {
class="w-full max-w-full relative rounded-moon-i-sm bg-goku"
>
Password
@@ -624,11 +624,11 @@ Object {
class="w-full max-w-full relative rounded-moon-i-sm bg-goku"
>
Password
@@ -674,11 +674,11 @@ Object {
class="w-full max-w-full relative bg-goku rounded-moon-s-xs [&_input]:rounded-moon-s-xs [&_input:focus]:rounded-moon-s-xs [&_input:hover]:rounded-moon-s-xs"
>
Username
@@ -697,11 +697,11 @@ Object {
class="w-full max-w-full relative bg-goku rounded-moon-s-xs [&_input]:rounded-moon-s-xs [&_input:focus]:rounded-moon-s-xs [&_input:hover]:rounded-moon-s-xs"
>
Email
@@ -714,11 +714,11 @@ Object {
class="w-full max-w-full relative rounded-moon-i-sm bg-goku"
>
Password
@@ -731,11 +731,11 @@ Object {
class="w-full max-w-full relative rounded-moon-i-sm bg-goku"
>
Password
@@ -838,7 +838,7 @@ Object {
Username
@@ -859,7 +859,7 @@ Object {
Email
@@ -1028,7 +1028,7 @@ Object {
Password
@@ -1079,7 +1079,7 @@ Object {
Username
@@ -1100,7 +1100,7 @@ Object {
Email
@@ -1269,7 +1269,7 @@ Object {
Password
@@ -1374,11 +1374,11 @@ Object {
class="w-full max-w-full relative bg-goku rounded-moon-s-xs [&_input]:rounded-moon-s-xs [&_input:focus]:rounded-moon-s-xs [&_input:hover]:rounded-moon-s-xs"
>
Username
@@ -1397,11 +1397,11 @@ Object {
class="w-full max-w-full relative bg-goku rounded-moon-s-xs [&_input]:rounded-moon-s-xs [&_input:focus]:rounded-moon-s-xs [&_input:hover]:rounded-moon-s-xs"
>
Email
@@ -1414,11 +1414,11 @@ Object {
class="w-full max-w-full relative rounded-moon-i-sm bg-goku"
>
Password
@@ -1431,11 +1431,11 @@ Object {
class="w-full max-w-full relative rounded-moon-i-sm bg-goku"
>
Password
@@ -1477,11 +1477,11 @@ Object {
class="w-full max-w-full relative bg-goku rounded-moon-s-xs [&_input]:rounded-moon-s-xs [&_input:focus]:rounded-moon-s-xs [&_input:hover]:rounded-moon-s-xs"
>
Username
@@ -1500,11 +1500,11 @@ Object {
class="w-full max-w-full relative bg-goku rounded-moon-s-xs [&_input]:rounded-moon-s-xs [&_input:focus]:rounded-moon-s-xs [&_input:hover]:rounded-moon-s-xs"
>
Email
@@ -1517,11 +1517,11 @@ Object {
class="w-full max-w-full relative rounded-moon-i-sm bg-goku"
>
Password
@@ -1534,11 +1534,11 @@ Object {
class="w-full max-w-full relative rounded-moon-i-sm bg-goku"
>
Password
diff --git a/next-docs/public/examples/group/__tests__/__snapshots__/index.test.tsx.snap b/next-docs/public/examples/group/__tests__/__snapshots__/index.test.tsx.snap
index 2181838eae..3aeb31f66f 100644
--- a/next-docs/public/examples/group/__tests__/__snapshots__/index.test.tsx.snap
+++ b/next-docs/public/examples/group/__tests__/__snapshots__/index.test.tsx.snap
@@ -12,14 +12,14 @@ Object {
class="flex border-none shadow-input relative h-fit bg-goku flex-col rounded-moon-i-sm"
>
@@ -36,14 +36,14 @@ Object {
class="flex border-none shadow-input relative h-fit bg-goku flex-col rounded-moon-i-sm"
>
@@ -120,14 +120,14 @@ Object {
class="flex border-none shadow-input relative h-fit bg-goku flex-col rounded-moon-i-sm"
>
@@ -137,14 +137,14 @@ Object {
class="flex border-none shadow-input relative h-fit bg-goku flex-row rounded-moon-i-sm"
>
@@ -164,14 +164,14 @@ Object {
class="flex border-none shadow-input relative h-fit bg-goku flex-col rounded-moon-i-sm"
>
@@ -181,14 +181,14 @@ Object {
class="flex border-none shadow-input relative h-fit bg-goku flex-row rounded-moon-i-sm"
>
@@ -265,14 +265,14 @@ Object {
class="flex border-none shadow-input relative h-fit bg-goku flex-col rounded-moon-i-xs"
>
@@ -282,14 +282,14 @@ Object {
class="flex border-none shadow-input relative h-fit bg-goku flex-col rounded-moon-i-sm"
>
@@ -299,14 +299,14 @@ Object {
class="flex border-none shadow-input relative h-fit bg-goku flex-col rounded-moon-i-sm"
>
@@ -327,14 +327,14 @@ Object {
class="flex border-none shadow-input relative h-fit bg-goku flex-col rounded-moon-i-xs"
>
@@ -344,14 +344,14 @@ Object {
class="flex border-none shadow-input relative h-fit bg-goku flex-col rounded-moon-i-sm"
>
@@ -361,14 +361,14 @@ Object {
class="flex border-none shadow-input relative h-fit bg-goku flex-col rounded-moon-i-sm"
>
@@ -446,14 +446,14 @@ Object {
class="flex border-none relative h-fit bg-goku flex-col rounded-moon-i-sm shadow-input-err hover:shadow-input-err focus:shadow-input-err focus-visible:shadow-input-error"
>
@@ -463,14 +463,14 @@ Object {
class="flex border-none shadow-input relative h-fit bg-goku flex-col rounded-moon-i-sm"
>
@@ -480,7 +480,7 @@ Object {
class="flex border-none shadow-input relative h-fit bg-goku flex-col rounded-moon-i-sm"
>
@@ -488,7 +488,7 @@ Object {
class="relative last-element before:absolute before:block before:bg-beerus hover:before:hidden before:transition-opacity before:h-px before:top-0 before:inset-x-0"
>
@@ -507,7 +507,7 @@ Object {
class="relative last-element before:absolute before:block before:bg-beerus hover:before:hidden before:transition-opacity before:h-px before:top-0 before:inset-x-0"
>
@@ -546,14 +546,14 @@ Object {
class="flex border-none shadow-input relative h-fit bg-goku flex-col rounded-moon-i-sm"
>
@@ -563,7 +563,7 @@ Object {
class="flex border-none shadow-input relative h-fit bg-goku flex-col rounded-moon-i-sm"
>
@@ -571,7 +571,7 @@ Object {
class="relative last-element before:absolute before:block before:bg-beerus hover:before:hidden before:transition-opacity before:h-px before:top-0 before:inset-x-0"
>
@@ -590,7 +590,7 @@ Object {
class="relative last-element before:absolute before:block before:bg-beerus hover:before:hidden before:transition-opacity before:h-px before:top-0 before:inset-x-0"
>
Label
@@ -685,11 +685,11 @@ Object {
class="w-full max-w-full relative rounded-moon-i-sm bg-goku last-element before:absolute before:block before:bg-beerus hover:before:hidden before:transition-opacity [&_input]:rounded-t-none [&_input]:input-tbb-hidden before:h-px before:top-0 before:inset-x-0"
>
Label
@@ -702,11 +702,11 @@ Object {
class="w-full max-w-full relative rounded-moon-i-sm bg-goku [&_+_.last-element:before]:hover:opacity-0 [&_input]:rounded-e-none rtl:[&_input]:input-lsb-hidden ltr:[&_input]:input-rsb-hidden flex-1 basis-1/2"
>
Label
@@ -715,11 +715,11 @@ Object {
class="w-full max-w-full relative rounded-moon-i-sm bg-goku last-element before:absolute before:block before:bg-beerus hover:before:hidden before:transition-opacity [&_input]:rounded-s-none rtl:[&_input]:input-rsb-hidden ltr:[&_input]:input-lsb-hidden flex-1 basis-1/2 before:w-px before:start-0 before:inset-y-0"
>
Label
@@ -776,7 +776,7 @@ Object {
class="relative last-element before:absolute before:block before:bg-beerus hover:before:hidden before:transition-opacity before:h-px before:top-0 before:inset-x-0"
>
@@ -785,7 +785,7 @@ Object {
class="flex border-none shadow-input relative h-fit bg-goku flex-row rounded-moon-i-sm"
>
Phone number
@@ -905,11 +905,11 @@ Object {
class="w-full max-w-full relative rounded-moon-i-sm bg-goku [&_+_.last-element:before]:hover:opacity-0 [&_input]:rounded-e-none rtl:[&_input]:input-lsb-hidden ltr:[&_input]:input-rsb-hidden flex-1 basis-1/2"
>
Name
@@ -981,11 +981,11 @@ Object {
class="w-full max-w-full relative rounded-moon-i-sm bg-goku [&_+_.last-element:before]:hover:opacity-0 [&_input]:rounded-b-none [&_input]:input-bbb-hidden"
>
Label
@@ -994,11 +994,11 @@ Object {
class="w-full max-w-full relative rounded-moon-i-sm bg-goku last-element before:absolute before:block before:bg-beerus hover:before:hidden before:transition-opacity [&_input]:rounded-t-none [&_input]:input-tbb-hidden before:h-px before:top-0 before:inset-x-0"
>
Label
@@ -1011,11 +1011,11 @@ Object {
class="w-full max-w-full relative rounded-moon-i-sm bg-goku [&_+_.last-element:before]:hover:opacity-0 [&_input]:rounded-e-none rtl:[&_input]:input-lsb-hidden ltr:[&_input]:input-rsb-hidden flex-1 basis-1/2"
>
Label
@@ -1024,11 +1024,11 @@ Object {
class="w-full max-w-full relative rounded-moon-i-sm bg-goku last-element before:absolute before:block before:bg-beerus hover:before:hidden before:transition-opacity [&_input]:rounded-s-none rtl:[&_input]:input-rsb-hidden ltr:[&_input]:input-lsb-hidden flex-1 basis-1/2 before:w-px before:start-0 before:inset-y-0"
>
Label
@@ -1085,7 +1085,7 @@ Object {
class="relative last-element before:absolute before:block before:bg-beerus hover:before:hidden before:transition-opacity before:h-px before:top-0 before:inset-x-0"
>
@@ -1094,7 +1094,7 @@ Object {
class="flex border-none shadow-input relative h-fit bg-goku flex-row rounded-moon-i-sm"
>
Phone number
@@ -1214,11 +1214,11 @@ Object {
class="w-full max-w-full relative rounded-moon-i-sm bg-goku [&_+_.last-element:before]:hover:opacity-0 [&_input]:rounded-e-none rtl:[&_input]:input-lsb-hidden ltr:[&_input]:input-rsb-hidden flex-1 basis-1/2"
>
Name
@@ -1338,14 +1338,14 @@ Object {
class="flex border-none shadow-input relative h-fit bg-goku flex-col rounded-moon-i-sm"
>
@@ -1358,14 +1358,14 @@ Object {
class="flex border-none shadow-input relative h-fit bg-goku flex-col rounded-moon-i-sm"
>
@@ -1438,14 +1438,14 @@ Object {
class="flex border-none shadow-input relative h-fit bg-goku flex-col rounded-moon-i-sm"
>
@@ -1455,14 +1455,14 @@ Object {
class="flex border-none shadow-input relative h-fit bg-goku flex-row rounded-moon-i-sm"
>
@@ -1478,14 +1478,14 @@ Object {
class="flex border-none shadow-input relative h-fit bg-goku flex-col rounded-moon-i-sm"
>
@@ -1495,14 +1495,14 @@ Object {
class="flex border-none shadow-input relative h-fit bg-goku flex-row rounded-moon-i-sm"
>
@@ -1575,14 +1575,14 @@ Object {
class="flex border-none shadow-input relative h-fit bg-goku flex-col rounded-moon-i-xs"
>
@@ -1592,14 +1592,14 @@ Object {
class="flex border-none shadow-input relative h-fit bg-goku flex-col rounded-moon-i-sm"
>
@@ -1609,14 +1609,14 @@ Object {
class="flex border-none shadow-input relative h-fit bg-goku flex-col rounded-moon-i-sm"
>
@@ -1633,14 +1633,14 @@ Object {
class="flex border-none shadow-input relative h-fit bg-goku flex-col rounded-moon-i-xs"
>
@@ -1650,14 +1650,14 @@ Object {
class="flex border-none shadow-input relative h-fit bg-goku flex-col rounded-moon-i-sm"
>
@@ -1667,14 +1667,14 @@ Object {
class="flex border-none shadow-input relative h-fit bg-goku flex-col rounded-moon-i-sm"
>
@@ -1748,14 +1748,14 @@ Object {
class="flex border-none relative h-fit bg-goku flex-col rounded-moon-i-sm shadow-input-err hover:shadow-input-err focus:shadow-input-err focus-visible:shadow-input-error"
>
@@ -1765,14 +1765,14 @@ Object {
class="flex border-none shadow-input relative h-fit bg-goku flex-col rounded-moon-i-sm"
>
@@ -1782,7 +1782,7 @@ Object {
class="flex border-none shadow-input relative h-fit bg-goku flex-col rounded-moon-i-sm"
>
@@ -1790,7 +1790,7 @@ Object {
class="relative last-element before:absolute before:block before:bg-beerus hover:before:hidden before:transition-opacity before:h-px before:top-0 before:inset-x-0"
>
@@ -1809,7 +1809,7 @@ Object {
class="relative last-element before:absolute before:block before:bg-beerus hover:before:hidden before:transition-opacity before:h-px before:top-0 before:inset-x-0"
>
@@ -1844,14 +1844,14 @@ Object {
class="flex border-none shadow-input relative h-fit bg-goku flex-col rounded-moon-i-sm"
>
@@ -1861,7 +1861,7 @@ Object {
class="flex border-none shadow-input relative h-fit bg-goku flex-col rounded-moon-i-sm"
>
@@ -1869,7 +1869,7 @@ Object {
class="relative last-element before:absolute before:block before:bg-beerus hover:before:hidden before:transition-opacity before:h-px before:top-0 before:inset-x-0"
>
@@ -1888,7 +1888,7 @@ Object {
class="relative last-element before:absolute before:block before:bg-beerus hover:before:hidden before:transition-opacity before:h-px before:top-0 before:inset-x-0"
>
Label
@@ -1979,11 +1979,11 @@ Object {
class="w-full max-w-full relative rounded-moon-i-sm bg-goku last-element before:absolute before:block before:bg-beerus hover:before:hidden before:transition-opacity [&_input]:rounded-t-none [&_input]:input-tbb-hidden before:h-px before:top-0 before:inset-x-0"
>
Label
@@ -1996,11 +1996,11 @@ Object {
class="w-full max-w-full relative rounded-moon-i-sm bg-goku [&_+_.last-element:before]:hover:opacity-0 [&_input]:rounded-e-none rtl:[&_input]:input-lsb-hidden ltr:[&_input]:input-rsb-hidden flex-1 basis-1/2"
>
Label
@@ -2009,11 +2009,11 @@ Object {
class="w-full max-w-full relative rounded-moon-i-sm bg-goku last-element before:absolute before:block before:bg-beerus hover:before:hidden before:transition-opacity [&_input]:rounded-s-none rtl:[&_input]:input-rsb-hidden ltr:[&_input]:input-lsb-hidden flex-1 basis-1/2 before:w-px before:start-0 before:inset-y-0"
>
Label
@@ -2070,7 +2070,7 @@ Object {
class="relative last-element before:absolute before:block before:bg-beerus hover:before:hidden before:transition-opacity before:h-px before:top-0 before:inset-x-0"
>
@@ -2079,7 +2079,7 @@ Object {
class="flex border-none shadow-input relative h-fit bg-goku flex-row rounded-moon-i-sm"
>
Phone number
@@ -2199,11 +2199,11 @@ Object {
class="w-full max-w-full relative rounded-moon-i-sm bg-goku [&_+_.last-element:before]:hover:opacity-0 [&_input]:rounded-e-none rtl:[&_input]:input-lsb-hidden ltr:[&_input]:input-rsb-hidden flex-1 basis-1/2"
>
Name
@@ -2271,11 +2271,11 @@ Object {
class="w-full max-w-full relative rounded-moon-i-sm bg-goku [&_+_.last-element:before]:hover:opacity-0 [&_input]:rounded-b-none [&_input]:input-bbb-hidden"
>
Label
@@ -2284,11 +2284,11 @@ Object {
class="w-full max-w-full relative rounded-moon-i-sm bg-goku last-element before:absolute before:block before:bg-beerus hover:before:hidden before:transition-opacity [&_input]:rounded-t-none [&_input]:input-tbb-hidden before:h-px before:top-0 before:inset-x-0"
>
Label
@@ -2301,11 +2301,11 @@ Object {
class="w-full max-w-full relative rounded-moon-i-sm bg-goku [&_+_.last-element:before]:hover:opacity-0 [&_input]:rounded-e-none rtl:[&_input]:input-lsb-hidden ltr:[&_input]:input-rsb-hidden flex-1 basis-1/2"
>
Label
@@ -2314,11 +2314,11 @@ Object {
class="w-full max-w-full relative rounded-moon-i-sm bg-goku last-element before:absolute before:block before:bg-beerus hover:before:hidden before:transition-opacity [&_input]:rounded-s-none rtl:[&_input]:input-rsb-hidden ltr:[&_input]:input-lsb-hidden flex-1 basis-1/2 before:w-px before:start-0 before:inset-y-0"
>
Label
@@ -2375,7 +2375,7 @@ Object {
class="relative last-element before:absolute before:block before:bg-beerus hover:before:hidden before:transition-opacity before:h-px before:top-0 before:inset-x-0"
>
@@ -2384,7 +2384,7 @@ Object {
class="flex border-none shadow-input relative h-fit bg-goku flex-row rounded-moon-i-sm"
>
Phone number
@@ -2504,11 +2504,11 @@ Object {
class="w-full max-w-full relative rounded-moon-i-sm bg-goku [&_+_.last-element:before]:hover:opacity-0 [&_input]:rounded-e-none rtl:[&_input]:input-lsb-hidden ltr:[&_input]:input-rsb-hidden flex-1 basis-1/2"
>
Name
diff --git a/next-docs/public/examples/input/Controled.tsx b/next-docs/public/examples/input/Controled.tsx
new file mode 100644
index 0000000000..e17e00c9fa
--- /dev/null
+++ b/next-docs/public/examples/input/Controled.tsx
@@ -0,0 +1,22 @@
+import { Input } from '@heathmont/moon-core-tw';
+import { useState } from 'react';
+
+const Example = () => {
+ const [color, setColor] = useState('FFFFFF');
+ return (
+
+
{
+ setColor(e.target.value);
+ }}
+ />
+
+ Result: {color}
+
+
+ );
+};
+
+export default Example;
diff --git a/next-docs/public/examples/input/CustomDate.tsx b/next-docs/public/examples/input/CustomDate.tsx
new file mode 100644
index 0000000000..d18b21062e
--- /dev/null
+++ b/next-docs/public/examples/input/CustomDate.tsx
@@ -0,0 +1,56 @@
+//This exemple should be discussed about separate date-picker component
+import { Input, Label } from '@heathmont/moon-core-tw';
+import { TimeCalendarDate } from '@heathmont/moon-icons-tw';
+
+const Example = () => (
+ <>
+
+
+
Date with placeholder
+
+ {
+ e.target.type = 'date';
+ e.target?.showPicker();
+ }}
+ onBlur={(e) => (e.target.type = 'text')}
+ />
+
+
+
+
+
+
+
Time
+
+ {
+ e.target.type = 'time';
+ e.target?.showPicker();
+ }}
+ onBlur={(e) => (e.target.type = 'text')}
+ />
+
+
+
+
+ Datetime local
+
+
+
+ >
+);
+
+export default Example;
diff --git a/next-docs/public/examples/input/__tests__/__snapshots__/index.test.tsx.snap b/next-docs/public/examples/input/__tests__/__snapshots__/index.test.tsx.snap
index 25323f6234..84cc62364d 100644
--- a/next-docs/public/examples/input/__tests__/__snapshots__/index.test.tsx.snap
+++ b/next-docs/public/examples/input/__tests__/__snapshots__/index.test.tsx.snap
@@ -21,7 +21,7 @@ Object {
Medium (Default: md)
+
+
+
+
+
+
+ Result:
+
+
+ FFFFFF
+
+
+
+
+