feat: ✨ implement contact and reservation forms with skeleton server actions
parent
f1bd80ce77
commit
35bfa0061b
@ -0,0 +1,12 @@
|
||||
"use server";
|
||||
|
||||
export const submitContactFormAction = (formData: FormData) => {
|
||||
console.log(JSON.stringify(formData, null, 2));
|
||||
console.log(formData.get("message"));
|
||||
console.log(formData.get("subject"));
|
||||
console.log(formData.get("date"));
|
||||
console.log(formData.get("time"));
|
||||
console.log(formData.get("name"));
|
||||
console.log(formData.get("email"));
|
||||
console.log(formData.get("phone"));
|
||||
};
|
||||
@ -0,0 +1,12 @@
|
||||
"use server";
|
||||
|
||||
export const submitReservationFormAction = (formData: FormData) => {
|
||||
console.log(JSON.stringify(formData, null, 2));
|
||||
console.log(formData.get("message"));
|
||||
console.log(formData.get("subject"));
|
||||
console.log(formData.get("date"));
|
||||
console.log(formData.get("time"));
|
||||
console.log(formData.get("name"));
|
||||
console.log(formData.get("email"));
|
||||
console.log(formData.get("phone"));
|
||||
};
|
||||
@ -0,0 +1,38 @@
|
||||
import { HStack, styled } from "@styled-system/jsx";
|
||||
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Field } from "@/components/ui/field";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { getI18n } from "@/i18n/server";
|
||||
import { stack } from "@styled-system/patterns";
|
||||
import { submitContactFormAction } from "@/actions/contact";
|
||||
|
||||
export default async function ContactForm() {
|
||||
const t = await getI18n();
|
||||
|
||||
return (
|
||||
<styled.form action={submitContactFormAction} className={stack()}>
|
||||
<Field.Root id="name">
|
||||
<Field.Label>{t("contact.name")}</Field.Label>
|
||||
<Field.Input name="name" placeholder={t("contact.name")} />
|
||||
</Field.Root>
|
||||
<Field.Root id="email">
|
||||
<Field.Label>{t("general.email")}</Field.Label>
|
||||
<Field.Input name="email" placeholder={t("general.email")} asChild>
|
||||
<Input type="email" />
|
||||
</Field.Input>
|
||||
</Field.Root>
|
||||
<Field.Root id="subject">
|
||||
<Field.Label>{t("contact.subject")}</Field.Label>
|
||||
<Field.Input name="subject" placeholder={t("contact.subject")} />
|
||||
</Field.Root>
|
||||
<Field.Root id="message">
|
||||
<Field.Label>{t("contact.message")}</Field.Label>
|
||||
<Field.Textarea name="message" placeholder={t("contact.message")}/>
|
||||
</Field.Root>
|
||||
<HStack justify="end">
|
||||
<Button type="submit">{t("general.submit")}</Button>
|
||||
</HStack>
|
||||
</styled.form>
|
||||
);
|
||||
}
|
||||
@ -0,0 +1,171 @@
|
||||
"use client";
|
||||
|
||||
import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
|
||||
import { HStack, Stack } from "@styled-system/jsx";
|
||||
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { DatePicker } from "@/components/ui/date-picker";
|
||||
import { Field } from "@/components/ui/field";
|
||||
import { FormLabel } from "@/components/ui/form-label";
|
||||
import { IconButton } from "@/components/ui/icon-button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { NumberInput } from "@/components/ui/number-input";
|
||||
import { useI18n } from "@/i18n/client";
|
||||
|
||||
export default function DateTimePicker() {
|
||||
const t = useI18n();
|
||||
|
||||
return (
|
||||
<HStack>
|
||||
<DatePicker.Root positioning={{ sameWidth: true }} startOfWeek={2} flex={1}>
|
||||
<DatePicker.Label>{t("general.date")}</DatePicker.Label>
|
||||
<DatePicker.Control>
|
||||
<DatePicker.Trigger asChild>
|
||||
<DatePicker.Input index={0} asChild>
|
||||
<Input placeholder={t("general.date")} />
|
||||
</DatePicker.Input>
|
||||
</DatePicker.Trigger>
|
||||
</DatePicker.Control>
|
||||
<DatePicker.Positioner>
|
||||
<DatePicker.Content>
|
||||
<DatePicker.View view="day">
|
||||
<DatePicker.Context>
|
||||
{(api) => (
|
||||
<>
|
||||
<DatePicker.ViewControl>
|
||||
<DatePicker.PrevTrigger asChild>
|
||||
<IconButton variant="ghost" size="sm">
|
||||
<ChevronLeftIcon />
|
||||
</IconButton>
|
||||
</DatePicker.PrevTrigger>
|
||||
<DatePicker.ViewTrigger asChild>
|
||||
<Button variant="ghost" size="sm">
|
||||
<DatePicker.RangeText />
|
||||
</Button>
|
||||
</DatePicker.ViewTrigger>
|
||||
<DatePicker.NextTrigger asChild>
|
||||
<IconButton variant="ghost" size="sm">
|
||||
<ChevronRightIcon />
|
||||
</IconButton>
|
||||
</DatePicker.NextTrigger>
|
||||
</DatePicker.ViewControl>
|
||||
<DatePicker.Table>
|
||||
<DatePicker.TableHead>
|
||||
<DatePicker.TableRow>
|
||||
{api.weekDays.map((weekDay, id) => (
|
||||
<DatePicker.TableHeader key={id}>
|
||||
{weekDay.narrow}
|
||||
</DatePicker.TableHeader>
|
||||
))}
|
||||
</DatePicker.TableRow>
|
||||
</DatePicker.TableHead>
|
||||
<DatePicker.TableBody>
|
||||
{api.weeks.map((week, id) => (
|
||||
<DatePicker.TableRow key={id}>
|
||||
{week.map((day, id) => (
|
||||
<DatePicker.TableCell key={id} value={day}>
|
||||
<DatePicker.TableCellTrigger asChild>
|
||||
<IconButton variant="ghost">{day.day}</IconButton>
|
||||
</DatePicker.TableCellTrigger>
|
||||
</DatePicker.TableCell>
|
||||
))}
|
||||
</DatePicker.TableRow>
|
||||
))}
|
||||
</DatePicker.TableBody>
|
||||
</DatePicker.Table>
|
||||
</>
|
||||
)}
|
||||
</DatePicker.Context>
|
||||
</DatePicker.View>
|
||||
<DatePicker.View view="month">
|
||||
<DatePicker.Context>
|
||||
{(api) => (
|
||||
<>
|
||||
<DatePicker.ViewControl>
|
||||
<DatePicker.PrevTrigger asChild>
|
||||
<IconButton variant="ghost" size="sm">
|
||||
<ChevronLeftIcon />
|
||||
</IconButton>
|
||||
</DatePicker.PrevTrigger>
|
||||
<DatePicker.ViewTrigger asChild>
|
||||
<Button variant="ghost" size="sm">
|
||||
<DatePicker.RangeText />
|
||||
</Button>
|
||||
</DatePicker.ViewTrigger>
|
||||
<DatePicker.NextTrigger asChild>
|
||||
<IconButton variant="ghost" size="sm">
|
||||
<ChevronRightIcon />
|
||||
</IconButton>
|
||||
</DatePicker.NextTrigger>
|
||||
</DatePicker.ViewControl>
|
||||
<DatePicker.Table>
|
||||
<DatePicker.TableBody>
|
||||
{api.getMonthsGrid({ columns: 4, format: "short" }).map((months, id) => (
|
||||
<DatePicker.TableRow key={id}>
|
||||
{months.map((month, id) => (
|
||||
<DatePicker.TableCell key={id} value={month.value}>
|
||||
<DatePicker.TableCellTrigger asChild>
|
||||
<Button variant="ghost">{month.label}</Button>
|
||||
</DatePicker.TableCellTrigger>
|
||||
</DatePicker.TableCell>
|
||||
))}
|
||||
</DatePicker.TableRow>
|
||||
))}
|
||||
</DatePicker.TableBody>
|
||||
</DatePicker.Table>
|
||||
</>
|
||||
)}
|
||||
</DatePicker.Context>
|
||||
</DatePicker.View>
|
||||
<DatePicker.View view="year">
|
||||
<DatePicker.Context>
|
||||
{(api) => (
|
||||
<>
|
||||
<DatePicker.ViewControl>
|
||||
<DatePicker.PrevTrigger asChild>
|
||||
<IconButton variant="ghost" size="sm">
|
||||
<ChevronLeftIcon />
|
||||
</IconButton>
|
||||
</DatePicker.PrevTrigger>
|
||||
<DatePicker.ViewTrigger asChild>
|
||||
<Button variant="ghost" size="sm">
|
||||
<DatePicker.RangeText />
|
||||
</Button>
|
||||
</DatePicker.ViewTrigger>
|
||||
<DatePicker.NextTrigger asChild>
|
||||
<IconButton variant="ghost" size="sm">
|
||||
<ChevronRightIcon />
|
||||
</IconButton>
|
||||
</DatePicker.NextTrigger>
|
||||
</DatePicker.ViewControl>
|
||||
<DatePicker.Table>
|
||||
<DatePicker.TableBody>
|
||||
{api.getYearsGrid({ columns: 4 }).map((years, id) => (
|
||||
<DatePicker.TableRow key={id}>
|
||||
{years.map((year, id) => (
|
||||
<DatePicker.TableCell key={id} value={year.value}>
|
||||
<DatePicker.TableCellTrigger asChild>
|
||||
<Button variant="ghost">{year.label}</Button>
|
||||
</DatePicker.TableCellTrigger>
|
||||
</DatePicker.TableCell>
|
||||
))}
|
||||
</DatePicker.TableRow>
|
||||
))}
|
||||
</DatePicker.TableBody>
|
||||
</DatePicker.Table>
|
||||
</>
|
||||
)}
|
||||
</DatePicker.Context>
|
||||
</DatePicker.View>
|
||||
</DatePicker.Content>
|
||||
</DatePicker.Positioner>
|
||||
</DatePicker.Root>
|
||||
<Field.Root>
|
||||
<Field.Label>{t("general.time")}</Field.Label>
|
||||
<Field.Input asChild>
|
||||
<Input placeholder={t("general.time")} type="time" />
|
||||
</Field.Input>
|
||||
</Field.Root>
|
||||
</HStack>
|
||||
);
|
||||
}
|
||||
@ -0,0 +1,45 @@
|
||||
import { HStack, Stack } from "@styled-system/jsx";
|
||||
|
||||
import { Button } from "@/components/ui/button";
|
||||
import DateTimePicker from "./date-time-picker";
|
||||
import { Field } from "@/components/ui/field";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { getI18n } from "@/i18n/server";
|
||||
import { stack } from "@styled-system/patterns";
|
||||
import { styled } from "@styled-system/jsx";
|
||||
import { submitReservationFormAction } from "@/actions/reservation";
|
||||
|
||||
export default async function ReservationForm() {
|
||||
const t = await getI18n();
|
||||
|
||||
return (
|
||||
<styled.form action={submitReservationFormAction} className={stack()}>
|
||||
<Field.Root id="name">
|
||||
<Field.Label>{t("contact.name")}</Field.Label>
|
||||
<Field.Input name="name" placeholder={t("contact.name")} />
|
||||
</Field.Root>
|
||||
<Field.Root id="email">
|
||||
<Field.Label>{t("general.email")}</Field.Label>
|
||||
<Field.Input name="email" placeholder={t("general.email")} asChild>
|
||||
<Input type="email" />
|
||||
</Field.Input>
|
||||
</Field.Root>
|
||||
<Field.Root id="phoneNumber">
|
||||
<Field.Label>{t("general.phoneNumber")}</Field.Label>
|
||||
<Field.Input name="phoneNumber" placeholder={t("general.phoneNumber")} />
|
||||
</Field.Root>
|
||||
<DateTimePicker />
|
||||
<Field.Root id="guests">
|
||||
<Field.Label>{t("reservation.guests")}</Field.Label>
|
||||
<Field.Input name="guests" placeholder={t("reservation.guests")} />
|
||||
</Field.Root>
|
||||
<Field.Root id="message">
|
||||
<Field.Label>{t("contact.message")}</Field.Label>
|
||||
<Field.Textarea name="message" placeholder={t("contact.message")} />
|
||||
</Field.Root>
|
||||
<HStack justify="end">
|
||||
<Button type="submit">{t("general.submit")}</Button>
|
||||
</HStack>
|
||||
</styled.form>
|
||||
);
|
||||
}
|
||||
@ -0,0 +1 @@
|
||||
export * as DatePicker from './styled/date-picker'
|
||||
@ -0,0 +1 @@
|
||||
export * as Field from './styled/field'
|
||||
@ -0,0 +1 @@
|
||||
export { FormLabel, type FormLabelProps } from './styled/form-label'
|
||||
@ -0,0 +1 @@
|
||||
export { Input, type InputProps } from './styled/input'
|
||||
@ -0,0 +1,52 @@
|
||||
import { forwardRef } from 'react'
|
||||
import * as StyledNumberInput from './styled/number-input'
|
||||
|
||||
export interface NumberInputProps extends StyledNumberInput.RootProps {}
|
||||
|
||||
export const NumberInput = forwardRef<HTMLDivElement, NumberInputProps>((props, ref) => {
|
||||
const { children, ...rootProps } = props
|
||||
return (
|
||||
<StyledNumberInput.Root ref={ref} {...rootProps}>
|
||||
{children && <StyledNumberInput.Label>{children}</StyledNumberInput.Label>}
|
||||
<StyledNumberInput.Control>
|
||||
<StyledNumberInput.Input />
|
||||
<StyledNumberInput.IncrementTrigger>
|
||||
<ChevronUpIcon />
|
||||
</StyledNumberInput.IncrementTrigger>
|
||||
<StyledNumberInput.DecrementTrigger>
|
||||
<ChevronDownIcon />
|
||||
</StyledNumberInput.DecrementTrigger>
|
||||
</StyledNumberInput.Control>
|
||||
</StyledNumberInput.Root>
|
||||
)
|
||||
})
|
||||
|
||||
NumberInput.displayName = 'NumberInput'
|
||||
|
||||
const ChevronUpIcon = () => (
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
|
||||
<title>Chevron Up Icon</title>
|
||||
<path
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
d="m18 15l-6-6l-6 6"
|
||||
/>
|
||||
</svg>
|
||||
)
|
||||
|
||||
const ChevronDownIcon = () => (
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
|
||||
<title>Chevron Down Icon</title>
|
||||
<path
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
d="m6 9l6 6l6-6"
|
||||
/>
|
||||
</svg>
|
||||
)
|
||||
@ -0,0 +1,137 @@
|
||||
'use client'
|
||||
import type { Assign } from '@ark-ui/react'
|
||||
import { DatePicker } from '@ark-ui/react/date-picker'
|
||||
import { type DatePickerVariantProps, datePicker } from 'styled-system/recipes'
|
||||
import type { ComponentProps, HTMLStyledProps } from 'styled-system/types'
|
||||
import { createStyleContext } from './utils/create-style-context'
|
||||
|
||||
const { withProvider, withContext } = createStyleContext(datePicker)
|
||||
|
||||
export type RootProviderProps = ComponentProps<typeof RootProvider>
|
||||
export const RootProvider = withProvider<
|
||||
HTMLDivElement,
|
||||
Assign<Assign<HTMLStyledProps<'div'>, DatePicker.RootProviderBaseProps>, DatePickerVariantProps>
|
||||
>(DatePicker.RootProvider, 'root')
|
||||
|
||||
export type RootProps = ComponentProps<typeof Root>
|
||||
export const Root = withProvider<
|
||||
HTMLDivElement,
|
||||
Assign<Assign<HTMLStyledProps<'div'>, DatePicker.RootBaseProps>, DatePickerVariantProps>
|
||||
>(DatePicker.Root, 'root')
|
||||
|
||||
export const ClearTrigger = withContext<
|
||||
HTMLButtonElement,
|
||||
Assign<HTMLStyledProps<'button'>, DatePicker.ClearTriggerBaseProps>
|
||||
>(DatePicker.ClearTrigger, 'clearTrigger')
|
||||
|
||||
export const Content = withContext<
|
||||
HTMLDivElement,
|
||||
Assign<HTMLStyledProps<'div'>, DatePicker.ContentBaseProps>
|
||||
>(DatePicker.Content, 'content')
|
||||
|
||||
export const Control = withContext<
|
||||
HTMLDivElement,
|
||||
Assign<HTMLStyledProps<'div'>, DatePicker.ControlBaseProps>
|
||||
>(DatePicker.Control, 'control')
|
||||
|
||||
export const Input = withContext<
|
||||
HTMLInputElement,
|
||||
Assign<HTMLStyledProps<'input'>, DatePicker.InputBaseProps>
|
||||
>(DatePicker.Input, 'input')
|
||||
|
||||
export const Label = withContext<
|
||||
HTMLLabelElement,
|
||||
Assign<HTMLStyledProps<'label'>, DatePicker.LabelBaseProps>
|
||||
>(DatePicker.Label, 'label')
|
||||
|
||||
export const MonthSelect = withContext<
|
||||
HTMLSelectElement,
|
||||
Assign<HTMLStyledProps<'select'>, DatePicker.MonthSelectBaseProps>
|
||||
>(DatePicker.MonthSelect, 'monthSelect')
|
||||
|
||||
export const NextTrigger = withContext<
|
||||
HTMLButtonElement,
|
||||
Assign<HTMLStyledProps<'button'>, DatePicker.NextTriggerBaseProps>
|
||||
>(DatePicker.NextTrigger, 'nextTrigger')
|
||||
|
||||
export const Positioner = withContext<
|
||||
HTMLDivElement,
|
||||
Assign<HTMLStyledProps<'div'>, DatePicker.PositionerBaseProps>
|
||||
>(DatePicker.Positioner, 'positioner')
|
||||
|
||||
export const PresetTrigger = withContext<
|
||||
HTMLButtonElement,
|
||||
Assign<HTMLStyledProps<'button'>, DatePicker.PresetTriggerBaseProps>
|
||||
>(DatePicker.PresetTrigger, 'presetTrigger')
|
||||
|
||||
export const PrevTrigger = withContext<
|
||||
HTMLButtonElement,
|
||||
Assign<HTMLStyledProps<'button'>, DatePicker.PrevTriggerBaseProps>
|
||||
>(DatePicker.PrevTrigger, 'prevTrigger')
|
||||
|
||||
export const RangeText = withContext<
|
||||
HTMLDivElement,
|
||||
Assign<HTMLStyledProps<'div'>, DatePicker.RangeTextBaseProps>
|
||||
>(DatePicker.RangeText, 'rangeText')
|
||||
|
||||
export const TableBody = withContext<
|
||||
HTMLTableSectionElement,
|
||||
Assign<HTMLStyledProps<'tbody'>, DatePicker.TableBodyBaseProps>
|
||||
>(DatePicker.TableBody, 'tableBody')
|
||||
|
||||
export const TableCell = withContext<
|
||||
HTMLTableCellElement,
|
||||
Assign<HTMLStyledProps<'td'>, DatePicker.TableCellBaseProps>
|
||||
>(DatePicker.TableCell, 'tableCell')
|
||||
|
||||
export const TableCellTrigger = withContext<
|
||||
HTMLDivElement,
|
||||
Assign<HTMLStyledProps<'div'>, DatePicker.TableCellTriggerBaseProps>
|
||||
>(DatePicker.TableCellTrigger, 'tableCellTrigger')
|
||||
|
||||
export const TableHead = withContext<
|
||||
HTMLTableSectionElement,
|
||||
Assign<HTMLStyledProps<'thead'>, DatePicker.TableHeadBaseProps>
|
||||
>(DatePicker.TableHead, 'tableHead')
|
||||
|
||||
export const TableHeader = withContext<
|
||||
HTMLTableCellElement,
|
||||
Assign<HTMLStyledProps<'th'>, DatePicker.TableHeaderBaseProps>
|
||||
>(DatePicker.TableHeader, 'tableHeader')
|
||||
|
||||
export const Table = withContext<
|
||||
HTMLTableElement,
|
||||
Assign<HTMLStyledProps<'table'>, DatePicker.TableBaseProps>
|
||||
>(DatePicker.Table, 'table')
|
||||
|
||||
export const TableRow = withContext<
|
||||
HTMLTableRowElement,
|
||||
Assign<HTMLStyledProps<'tr'>, DatePicker.TableRowBaseProps>
|
||||
>(DatePicker.TableRow, 'tableRow')
|
||||
|
||||
export const Trigger = withContext<
|
||||
HTMLButtonElement,
|
||||
Assign<HTMLStyledProps<'button'>, DatePicker.TriggerBaseProps>
|
||||
>(DatePicker.Trigger, 'trigger')
|
||||
|
||||
export const ViewControl = withContext<
|
||||
HTMLDivElement,
|
||||
Assign<HTMLStyledProps<'div'>, DatePicker.ViewControlBaseProps>
|
||||
>(DatePicker.ViewControl, 'viewControl')
|
||||
|
||||
export const View = withContext<
|
||||
HTMLDivElement,
|
||||
Assign<HTMLStyledProps<'div'>, DatePicker.ViewBaseProps>
|
||||
>(DatePicker.View, 'view')
|
||||
|
||||
export const ViewTrigger = withContext<
|
||||
HTMLButtonElement,
|
||||
Assign<HTMLStyledProps<'button'>, DatePicker.ViewTriggerBaseProps>
|
||||
>(DatePicker.ViewTrigger, 'viewTrigger')
|
||||
|
||||
export const YearSelect = withContext<
|
||||
HTMLSelectElement,
|
||||
Assign<HTMLStyledProps<'select'>, DatePicker.YearSelectBaseProps>
|
||||
>(DatePicker.YearSelect, 'yearSelect')
|
||||
|
||||
export { DatePickerContext as Context } from '@ark-ui/react/date-picker'
|
||||
@ -0,0 +1,49 @@
|
||||
'use client'
|
||||
import type { Assign } from '@ark-ui/react'
|
||||
import { Field } from '@ark-ui/react/field'
|
||||
import { styled } from 'styled-system/jsx'
|
||||
import { type FieldVariantProps, field, input, textarea } from 'styled-system/recipes'
|
||||
import type { ComponentProps, HTMLStyledProps } from 'styled-system/types'
|
||||
import { createStyleContext } from './utils/create-style-context'
|
||||
|
||||
const { withProvider, withContext } = createStyleContext(field)
|
||||
|
||||
export type RootProviderProps = ComponentProps<typeof RootProvider>
|
||||
export const RootProvider = withProvider<
|
||||
HTMLDivElement,
|
||||
Assign<Assign<HTMLStyledProps<'div'>, Field.RootProviderBaseProps>, FieldVariantProps>
|
||||
>(Field.RootProvider, 'root')
|
||||
|
||||
export type RootProps = ComponentProps<typeof Root>
|
||||
export const Root = withProvider<
|
||||
HTMLDivElement,
|
||||
Assign<Assign<HTMLStyledProps<'div'>, Field.RootBaseProps>, FieldVariantProps>
|
||||
>(Field.Root, 'root')
|
||||
|
||||
export const ErrorText = withContext<
|
||||
HTMLSpanElement,
|
||||
Assign<HTMLStyledProps<'span'>, Field.ErrorTextBaseProps>
|
||||
>(Field.ErrorText, 'errorText')
|
||||
|
||||
export const HelperText = withContext<
|
||||
HTMLSpanElement,
|
||||
Assign<HTMLStyledProps<'span'>, Field.HelperTextBaseProps>
|
||||
>(Field.HelperText, 'helperText')
|
||||
|
||||
export const Label = withContext<
|
||||
HTMLLabelElement,
|
||||
Assign<HTMLStyledProps<'label'>, Field.LabelBaseProps>
|
||||
>(Field.Label, 'label')
|
||||
|
||||
export const Select = withContext<
|
||||
HTMLSelectElement,
|
||||
Assign<HTMLStyledProps<'select'>, Field.SelectBaseProps>
|
||||
>(Field.Select, 'select')
|
||||
|
||||
export type InputProps = ComponentProps<typeof Input>
|
||||
export const Input = styled(Field.Input, input)
|
||||
|
||||
export type TextareaProps = ComponentProps<typeof Textarea>
|
||||
export const Textarea = styled(Field.Textarea, textarea)
|
||||
|
||||
export { FieldContext as Context } from '@ark-ui/react/field'
|
||||
@ -0,0 +1,7 @@
|
||||
import { ark } from '@ark-ui/react/factory'
|
||||
import { styled } from 'styled-system/jsx'
|
||||
import { formLabel } from 'styled-system/recipes'
|
||||
import type { ComponentProps } from 'styled-system/types'
|
||||
|
||||
export type FormLabelProps = ComponentProps<typeof FormLabel>
|
||||
export const FormLabel = styled(ark.label, formLabel)
|
||||
@ -0,0 +1,7 @@
|
||||
import { ark } from '@ark-ui/react/factory'
|
||||
import { styled } from 'styled-system/jsx'
|
||||
import { input } from 'styled-system/recipes'
|
||||
import type { ComponentProps } from 'styled-system/types'
|
||||
|
||||
export type InputProps = ComponentProps<typeof Input>
|
||||
export const Input = styled(ark.input, input)
|
||||
@ -0,0 +1,57 @@
|
||||
'use client'
|
||||
import type { Assign } from '@ark-ui/react'
|
||||
import { NumberInput } from '@ark-ui/react/number-input'
|
||||
import { type NumberInputVariantProps, numberInput } from 'styled-system/recipes'
|
||||
import type { ComponentProps, HTMLStyledProps } from 'styled-system/types'
|
||||
import { createStyleContext } from './utils/create-style-context'
|
||||
|
||||
const { withProvider, withContext } = createStyleContext(numberInput)
|
||||
|
||||
export type RootProviderProps = ComponentProps<typeof RootProvider>
|
||||
export const RootProvider = withProvider<
|
||||
HTMLDivElement,
|
||||
Assign<Assign<HTMLStyledProps<'div'>, NumberInput.RootProviderBaseProps>, NumberInputVariantProps>
|
||||
>(NumberInput.RootProvider, 'root')
|
||||
|
||||
export type RootProps = ComponentProps<typeof Root>
|
||||
export const Root = withProvider<
|
||||
HTMLDivElement,
|
||||
Assign<Assign<HTMLStyledProps<'div'>, NumberInput.RootBaseProps>, NumberInputVariantProps>
|
||||
>(NumberInput.Root, 'root')
|
||||
|
||||
export const Control = withContext<
|
||||
HTMLDivElement,
|
||||
Assign<HTMLStyledProps<'div'>, NumberInput.ControlBaseProps>
|
||||
>(NumberInput.Control, 'control')
|
||||
|
||||
export const DecrementTrigger = withContext<
|
||||
HTMLButtonElement,
|
||||
Assign<HTMLStyledProps<'button'>, NumberInput.DecrementTriggerBaseProps>
|
||||
>(NumberInput.DecrementTrigger, 'decrementTrigger')
|
||||
|
||||
export const IncrementTrigger = withContext<
|
||||
HTMLButtonElement,
|
||||
Assign<HTMLStyledProps<'button'>, NumberInput.IncrementTriggerBaseProps>
|
||||
>(NumberInput.IncrementTrigger, 'incrementTrigger')
|
||||
|
||||
export const Input = withContext<
|
||||
HTMLInputElement,
|
||||
Assign<HTMLStyledProps<'input'>, NumberInput.InputBaseProps>
|
||||
>(NumberInput.Input, 'input')
|
||||
|
||||
export const Label = withContext<
|
||||
HTMLLabelElement,
|
||||
Assign<HTMLStyledProps<'label'>, NumberInput.LabelBaseProps>
|
||||
>(NumberInput.Label, 'label')
|
||||
|
||||
export const Scrubber = withContext<
|
||||
HTMLDivElement,
|
||||
Assign<HTMLStyledProps<'div'>, NumberInput.ScrubberBaseProps>
|
||||
>(NumberInput.Scrubber, 'scrubber')
|
||||
|
||||
export const ValueText = withContext<
|
||||
HTMLSpanElement,
|
||||
Assign<HTMLStyledProps<'span'>, NumberInput.ValueTextBaseProps>
|
||||
>(NumberInput.ValueText, 'valueText')
|
||||
|
||||
export { NumberInputContext as Context } from '@ark-ui/react/number-input'
|
||||
Loading…
Reference in New Issue