@stamcat/craftsman 0.0.27-alpha.2 → 0.0.27-alpha.20

package/src/components/Pagination/AGENTS.md

@@ -0,0 +1,38 @@
+# Pagination — Agent Usage Notes
+
+Import:
+
+```tsx
+import { Pagination } from "@stamcat/craftsman/Pagination";
+```
+
+Props:
+
+- `total: number`
+- `current: number`
+- `showPages?: number` (default: `5`)
+- `onChange: (e: React.MouseEvent<HTMLButtonElement>) => void`
+- `className?: string`
+- `style?: React.CSSProperties`
+
+Behavior notes:
+
+- Pagination is zero-based internally. Pass `current={0}` for the first page.
+- `total` is the total number of pages, not the last page index.
+- The component renders first/last buttons and jump-by-window buttons when needed.
+- `showPages` controls both the visible window size and the jump step for `‹‹` / `››`.
+- `onChange` receives the clicked button event. Read the next page from `event.currentTarget.value`.
+- The active page button is disabled and marked with `aria-current="page"`.
+
+Example:
+
+```tsx
+const [current, setCurrent] = useState(0);
+
+<Pagination
+  total={50}
+  current={current}
+  showPages={5}
+  onChange={(event) => setCurrent(parseInt(event.currentTarget.value, 10) || 0)}
+/>
+```

package/src/components/Pagination/Pagination.css

@@ -0,0 +1 @@
+@layer craftsman-component{.pagination{align-items:center;gap:calc(var(--w-gutter) * .25);display:inline-flex}.pagination .active{color:var(--gray700);border:1px solid;border-radius:50%;justify-content:center;align-items:center;width:20px;height:20px;display:inline-flex}}

package/src/components/Pagination/Pagination.d.ts

@@ -0,0 +1,10 @@
+import { default as React } from 'react';
+export type PaginationProps = {
+    total: number;
+    current: number;
+    showPages?: number;
+    onChange: (e: React.MouseEvent<HTMLButtonElement>) => void;
+    className?: string;
+    style?: React.CSSProperties;
+};
+export declare const Pagination: React.FC<PaginationProps>;

package/src/components/Pagination/Pagination.scss

@@ -0,0 +1,22 @@
+
+@use "../../styles/utilities/_functions" as u;
+
+@layer craftsman-component {
+    .pagination {
+        display: inline-flex;
+        align-items: center;
+        gap: #{u.width("gutter", 0.25)};
+
+        .active {
+            color: #{u.color("gray700")};
+            border: 1px solid;
+            border-radius: 50%;
+            width: 20px;
+            height: 20px;
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            
+        }
+    }
+}

package/src/components/Pagination/Pagination2.esm.js

@@ -0,0 +1,64 @@
+"use client";
+import './Pagination.css';/* empty css               */
+import e from "clsx";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+import "react";
+//#region src/components/Pagination/Pagination.tsx
+var r = ({ total: r, current: i, onChange: a, className: o, style: s, showPages: c = 5 }) => {
+	function l(e, t) {
+		let n = Math.floor(c / 2), r = Math.max(0, e - n), i = Math.min(t - 1, r + c - 1);
+		r = Math.max(0, i - c + 1);
+		let a = [];
+		for (let e = r; e <= i; e++) a.push(e);
+		return a;
+	}
+	let u = l(i, r), d = Math.floor(i / c), f = d > 0, p = (d + 1) * c < r, m = (d - 1) * c, h = (d + 1) * c;
+	return /* @__PURE__ */ n("nav", {
+		className: e("pagination", o),
+		style: s,
+		"aria-label": "Pagination",
+		children: [
+			/* @__PURE__ */ t("button", {
+				className: "text",
+				value: 0,
+				onClick: a,
+				disabled: i === 0,
+				"aria-label": "First page",
+				children: "«"
+			}),
+			f && /* @__PURE__ */ t("button", {
+				className: "text",
+				value: m,
+				onClick: a,
+				"aria-label": `Back ${c} pages`,
+				children: "‹‹"
+			}),
+			u.map((n) => /* @__PURE__ */ t("button", {
+				value: n,
+				onClick: a,
+				disabled: n === i,
+				"aria-label": `Page ${n + 1}`,
+				"aria-current": n === i ? "page" : void 0,
+				className: e("text", n === i ? "active" : void 0),
+				children: n + 1
+			}, n)),
+			p && /* @__PURE__ */ t("button", {
+				className: "text",
+				value: h,
+				onClick: a,
+				"aria-label": `Forward ${c} pages`,
+				children: "››"
+			}),
+			/* @__PURE__ */ t("button", {
+				className: "text",
+				value: r - 1,
+				onClick: a,
+				disabled: i === r - 1,
+				"aria-label": "Last page",
+				children: "»"
+			})
+		]
+	});
+};
+//#endregion
+export { r as Pagination };

package/src/components/RadioButton/AGENTS.md

@@ -0,0 +1,42 @@
+# RadioButton — Agent Usage Notes
+
+Import:
+
+```tsx
+import { RadioButton } from "@stamcat/craftsman/RadioButton";
+```
+
+Props:
+
+- Extends `Input` props.
+- `type?: "radio"` (default: `"radio"`)
+- `labelPosition?: "left" | "right"` (default: `"right"`)
+
+Behavior notes:
+
+- `RadioButton` is a thin wrapper around `Input` with radio-specific guardrails.
+- Group behavior is native HTML radio behavior: use a shared `name` across options.
+- Controlled and uncontrolled patterns are both supported (`checked` + `onChange`, or `defaultChecked`).
+
+Example:
+
+```tsx
+<>
+  <RadioButton
+    id="captain-kirk"
+    name="favorite-captain"
+    value="Kirk"
+    label="James T. Kirk"
+    checked={selected === "Kirk"}
+    onChange={(event) => setSelected(event.currentTarget.value)}
+  />
+  <RadioButton
+    id="captain-picard"
+    name="favorite-captain"
+    value="Picard"
+    label="Jean-Luc Picard"
+    checked={selected === "Picard"}
+    onChange={(event) => setSelected(event.currentTarget.value)}
+  />
+</>
+```

package/src/components/RadioButton/RadioButton.d.ts

@@ -0,0 +1,8 @@
+import { RadioLabelPosition } from '../../styles';
+import { InputProps } from '../Input/Input';
+type RadioButtonProps = InputProps & {
+    type?: "radio";
+    labelPosition?: RadioLabelPosition;
+};
+export declare const RadioButton: React.FC<RadioButtonProps>;
+export {};

package/src/components/{RadioButton.esm.js → RadioButton/RadioButton.esm.js}

@@ -1,7 +1,7 @@
 "use client";
-import { Input as e } from "./Input.esm.js";
+import { Input as e } from "../Input/Input2.esm.js";
 import { jsx as t } from "react/jsx-runtime";
-//#region src/components/RadioButton.tsx
+//#region src/components/RadioButton/RadioButton.tsx
 var n = ({ type: n = "radio", labelPosition: r = "right", ...i }) => /* @__PURE__ */ t(e, {
 	type: n,
 	labelPosition: r,

package/src/components/Select/AGENTS.md

@@ -0,0 +1,36 @@
+# Select — Agent Usage Notes
+
+Import:
+
+```tsx
+import { Select } from "@stamcat/craftsman/Select";
+```
+
+Props:
+
+- Inherits all native `<select>` props.
+- `label?: string | ReactNode`
+- `labelPosition?: "top" | "left" | "bottom" | "right" | "inside" | "hidden"` (default: `"top"`)
+- `error?: string | boolean | ReactNode`
+- `required?: boolean`
+- `options?: Array<{ label: string; value: string }>`
+
+Behavior notes:
+
+- Built on the native `<select>` element via `InputWrapper`.
+- Pass options as a plain array — do not render `<option>` children manually.
+- `id` is auto-generated via `useId` if not provided.
+
+Example:
+
+```tsx
+<Select
+  label="Favorite Fruit"
+  required
+  options={[
+    { value: "", label: "Select one..." },
+    { value: "apple", label: "Apple" },
+    { value: "banana", label: "Banana" },
+  ]}
+/>
+```

package/src/components/Select/Select.d.ts

@@ -0,0 +1,14 @@
+import { LabeledInput } from '../Input/InputWrapper';
+export type SelectOption = {
+    value: string;
+    selected?: boolean;
+    disabled?: boolean;
+    label: string;
+};
+export type SelectProps = React.ComponentProps<"select"> & LabeledInput & {
+    options?: {
+        label: string;
+        value: string;
+    }[];
+};
+export declare const Select: React.FC<SelectProps>;

package/src/components/Select/Select.esm.js

@@ -0,0 +1,26 @@
+"use client";
+import { InputWrapper as e } from "../Input/InputWrapper.esm.js";
+import { jsx as t } from "react/jsx-runtime";
+import { useId as n } from "react";
+//#region src/components/Select/Select.tsx
+var r = ({ label: r, id: i, labelPosition: a = "top", required: o = !1, error: s, options: c = [], className: l, style: u, ...d }) => {
+	let f = n(), p = i || f;
+	return /* @__PURE__ */ t(e, {
+		label: r,
+		labelPosition: a,
+		error: s,
+		required: o,
+		className: l,
+		style: u,
+		children: /* @__PURE__ */ t("select", {
+			id: p,
+			...d,
+			children: c.map((e, n) => /* @__PURE__ */ t("option", {
+				value: e.value,
+				children: e.label
+			}, `${p}-opt-${n}`))
+		})
+	});
+};
+//#endregion
+export { r as Select };

package/src/components/Text/AGENTS.md

@@ -0,0 +1,32 @@
+# Text — Agent Usage Notes
+
+Import:
+
+```tsx
+import { Text } from "@stamcat/craftsman/Text";
+```
+
+Props:
+
+- Inherits all native HTML element props.
+- `as?: TextTags` — HTML tag to render (default: `"div"`)
+- `richText?: boolean` — when `true`, renders sanitized HTML from a string `children` value (always renders as `<div>`)
+- `type?: TextType` — overrides base type styling (e.g. `"display"`, `"heading"`)
+- `size?: TextSize` — overrides base size styling
+- `alignment?: "center" | "left" | "right"` — legacy text-align shorthand
+
+Behavior notes:
+
+- Uses global HTML5 tag declarations by default; `type` and `size` override base styling.
+- `richText` mode sanitizes HTML via DOMPurify. Always pass a string as `children` in this mode.
+- Prefer semantic HTML5 tags via `as` over using `type`/`size` overrides.
+
+Example:
+
+```tsx
+// Semantic heading
+<Text as="h2">Section Title</Text>
+
+// Sanitized rich text from a CMS
+<Text richText>{'<p><strong>Hello</strong> world</p>'}</Text>
+```

package/src/components/Text/Text.css

@@ -0,0 +1 @@
+@layer craftsman-base{h1{font-size:calc(var(--w-text) * 3.125);line-height:1.2}h2{font-size:calc(var(--w-text) * 2.625);font-weight:625;line-height:1.1}h3{font-size:calc(var(--w-text) * 1.625);line-height:1.1}h4{font-size:calc(var(--w-text) * 1.25);margin:calc(var(--w-gutter) * .5) 0;line-height:1.1}h5{font-size:var(--w-text);line-height:1.2}h6{font-size:calc(var(--w-text) * .875);font-weight:600;line-height:1.2}p{font-style:normal;font-size:var(--w-text);margin:0;line-height:1.5}small{font-size:calc(var(--w-text) * .75)}@media (width<=660px){h4{font-size:var(--w-text,14px)}p{font-size:calc(var(--w-text,14px) * .875)}}}@layer craftsman-component{.text.display{font-size:calc(var(--w-text) * 1.625);line-height:1.1}.text.display.xlarge{font-size:calc(var(--w-text) * 3.125);line-height:1.2}.text.display.large{font-size:calc(var(--w-text) * 2.625);font-weight:625;line-height:1.1}.text.display.small{font-size:calc(var(--w-text) * 1.25);margin:calc(var(--w-gutter) * .5) 0;line-height:1.1}.text.heading{font-size:calc(var(--w-text) * 1.625);line-height:1.1}.text.heading.xlarge{font-size:calc(var(--w-text) * 3.125);line-height:1.2}.text.heading.large,.text.xlarge{font-size:calc(var(--w-text) * 2.625);font-weight:625;line-height:1.1}.text.heading.medium{font-size:calc(var(--w-text) * 1.625);line-height:1.1}.text.heading.small{font-size:calc(var(--w-text) * 1.25);margin:calc(var(--w-gutter) * .5) 0;line-height:1.1}.text.heading.xsmall{font-size:var(--w-text);line-height:1.2}.text.paragraph{font-style:normal;font-size:var(--w-text);margin:0;line-height:1.5}.text.paragraph.xlarge,.text.large{font-size:calc(var(--w-text) * 1.625);line-height:1.1}.text.paragraph.large{font-size:calc(var(--w-text) * 1.25);margin:calc(var(--w-gutter) * .5) 0;line-height:1.1}.text.paragraph.medium,.text.medium{font-style:normal;font-size:var(--w-text);margin:0;line-height:1.5}.text.paragraph.small,.text.small{font-size:calc(var(--w-text) * .75)}.text.paragraph.xsmall,.text.xsmall{font-size:calc(var(--w-text) * .5)}.text.caption{font-size:calc(var(--w-text) * .75)}.text.center{text-align:center}.text.left{text-align:left}.text.right{text-align:right}}

package/src/components/Text/Text.d.ts

@@ -0,0 +1,10 @@
+import { TextSize } from 'storybook/theming';
+import { TextTags, TextType } from '../../utilities/types';
+export type TextProps = React.HTMLAttributes<HTMLElement> & {
+    as?: TextTags;
+    richText?: boolean;
+    type?: TextType;
+    size?: TextSize;
+    alignment?: "center" | "left" | "right";
+};
+export declare const Text: React.FC<TextProps>;

package/src/components/Text/Text.scss

@@ -0,0 +1,80 @@
+@use "../../styles/utilities/_functions" as u;
+@use "../../styles/global/components/typography" as t;
+@layer craftsman-component {
+    .text {
+        // --- display ---
+        &.display {
+            @include t.h3;
+        }
+        &.display.xlarge {
+            @include t.h1;
+        }
+        &.display.large {
+            @include t.h2;
+        }
+        &.display.small {
+            @include t.h4;
+        }
+
+        // --- heading ---
+        &.heading {
+            @include t.h3;
+        }
+        &.heading.xlarge {
+            @include t.h1;
+        }
+        &.heading.large,
+        &.xlarge {
+            @include t.h2;
+        }
+        &.heading.medium {
+            @include t.h3;
+        }
+        &.heading.small {
+            @include t.h4;
+        }
+        &.heading.xsmall {
+            @include t.h5;
+        }
+
+        // --- paragraph ---
+        &.paragraph {
+            @include t.p;
+        }
+        &.paragraph.xlarge,
+        &.large {
+            @include t.h3;
+        }
+        &.paragraph.large {
+            @include t.h4;
+        }
+        &.paragraph.medium,
+        &.medium {
+            @include t.p;
+        }
+        &.paragraph.small,
+        &.small {
+            @include t.small;
+        }
+        &.paragraph.xsmall,
+        &.xsmall {
+            @include t.xsmall;
+        }
+
+        // --- caption ---
+        &.caption {
+            @include t.small;
+        }
+
+        // --- alignment ---
+        &.center {
+            text-align: center;
+        }
+        &.left {
+            text-align: left;
+        }
+        &.right {
+            text-align: right;
+        }
+    }
+}

package/src/components/Text/Text2.esm.js

@@ -0,0 +1,23 @@
+import './Text.css';/* empty css         */
+import e from "clsx";
+import { jsx as t } from "react/jsx-runtime";
+import n from "dompurify";
+//#region src/components/Text/Text.tsx
+var r = ({ as: r = "div", children: i, type: a, size: o, className: s, alignment: c, richText: l, ...u }) => {
+	let d = e(a && a, o && o, c && c, "text", s);
+	if (l) {
+		let e = typeof i == "string" ? n.sanitize(i, { ADD_ATTR: ["target"] }) : i;
+		return /* @__PURE__ */ t("div", {
+			...u,
+			className: d,
+			dangerouslySetInnerHTML: { __html: e || "" }
+		});
+	}
+	return /* @__PURE__ */ t(r, {
+		...u,
+		className: d,
+		children: i
+	});
+};
+//#endregion
+export { r as Text };

package/src/components/Textarea/AGENTS.md

@@ -0,0 +1,32 @@
+# Textarea — Agent Usage Notes
+
+Import:
+
+```tsx
+import { Textarea } from "@stamcat/craftsman/Textarea";
+```
+
+Props:
+
+- Inherits all native `<textarea>` props.
+- `label?: string | ReactNode`
+- `labelPosition?: "top" | "left" | "bottom" | "right" | "inside" | "hidden"` (default: `"top"`)
+- `error?: string | boolean | ReactNode`
+- `required?: boolean`
+- `rows?: number`
+
+Behavior notes:
+
+- Shares the same `InputWrapper` as `Input` — label, error, and required behavior is identical.
+- `id` is auto-generated via `useId` if not provided.
+
+Example:
+
+```tsx
+<Textarea
+  label="Your Message"
+  placeholder="Type here"
+  rows={4}
+  required
+/>
+```

package/src/components/Textarea/Textarea.d.ts

@@ -0,0 +1,3 @@
+import { LabeledInput } from '../Input/InputWrapper';
+export type TextareaProps = React.ComponentProps<"textarea"> & LabeledInput;
+export declare const Textarea: React.FC<TextareaProps>;

package/src/components/Textarea/Textarea.esm.js

@@ -0,0 +1,23 @@
+"use client";
+import { InputWrapper as e } from "../Input/InputWrapper.esm.js";
+import { jsx as t } from "react/jsx-runtime";
+import { useId as n } from "react";
+//#region src/components/Textarea/Textarea.tsx
+var r = ({ labelPosition: r = "top", id: i, label: a, error: o, required: s, className: c, style: l, ...u }) => {
+	let d = n();
+	return /* @__PURE__ */ t(e, {
+		label: a,
+		className: c,
+		labelPosition: r,
+		error: o,
+		required: s,
+		style: l,
+		children: /* @__PURE__ */ t("textarea", {
+			id: i || d,
+			className: "input",
+			...u
+		})
+	});
+};
+//#endregion
+export { r as Textarea };

package/src/components/TimePicker/AGENTS.md

@@ -0,0 +1,42 @@
+# TimePicker — Agent Usage Notes
+
+Import:
+
+```tsx
+import { TimePicker } from "@stamcat/craftsman/TimePicker";
+```
+
+Props:
+
+- Extends `TimePickerProps` from `react-time-picker`, excluding its `locale` and `format` props.
+- `label?: string | ReactNode`
+- `labelPosition?: "top" | "left" | "bottom" | "right" | "inside" | "hidden"` (default: `"top"`)
+- `error?: string | boolean | ReactNode`
+- `required?: boolean`
+- `locale?: Intl.LocalesArgument`
+- `format?: 24 | 12`
+- `labels?: { hour?: string; minute?: string }`
+
+Behavior notes:
+
+- The component uses a custom wheel UI instead of the stock `react-time-picker` clock popup.
+- `value` is typically a time string such as `"09:30"`; pair it with `onChange` for interactive controlled usage.
+- If a `value` is provided without `onChange`, treat the picker as effectively read-only.
+- Focusing the input opens the wheel, and the trailing toggle button shows or hides it explicitly.
+- The trailing toggle button mirrors the field's `disabled` prop — when `disabled` is set, the toggle is disabled too.
+- Clicking outside the field and wheel closes the wheel.
+- `locale` defaults to the browser locale when omitted and affects time formatting and wheel labels.
+- When `name` is provided, the component renders a hidden input so forms can submit the selected string value.
+
+Example:
+
+```tsx
+const [time, setTime] = useState("09:30");
+
+<TimePicker
+  label="Appointment Time"
+  value={time}
+  onChange={(value) => setTime(value ?? "")}
+  format={24}
+/>
+```

package/src/components/TimePicker/TimePicker.css

@@ -0,0 +1 @@
+@layer craftsman-base{.react-time-picker__wrapper:focus{box-shadow:none;outline:0}.react-time-picker__wrapper{color:var(--text);border:1px solid var(--gray400);padding:calc(var(--w-gutter) * .5);background-color:var(--white);border-radius:6px}[type=number].react-time-picker__wrapper::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}[type=number].react-time-picker__wrapper::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}[type=number].react-time-picker__wrapper{appearance:textfield}.react-time-picker__wrapper:disabled,.disabled.react-time-picker__wrapper{border-color:var(--gray200);background-color:var(--gray100)}}.react-time-picker,.react-time-picker *,.react-time-picker :before,.react-time-picker :after{box-sizing:border-box}@layer craftsman-component{.react-time-picker{display:inline-flex;position:relative}.react-time-picker--disabled{color:#6d6d6d;background-color:#f0f0f0}.react-time-picker__wrapper{flex-grow:1;flex-shrink:0;padding:6px 8px;display:flex}.react-time-picker__inputGroup{box-sizing:content-box;flex-grow:1;padding:0 2px}.react-time-picker__inputGroup__divider{white-space:pre;padding:1px 0}.react-time-picker__inputGroup__divider,.react-time-picker__inputGroup__leadingZero{font:inherit;display:inline-block}.react-time-picker__inputGroup__input{text-align:center;color:currentColor;min-width:calc(2ch + 1px);height:calc(100% - 2px);font:inherit;box-sizing:content-box;appearance:textfield;background:0 0;border:0;padding:1px;position:relative}[name=year].react-time-picker__inputGroup__input{min-width:calc(4ch + 2px)}.react-time-picker__inputGroup__input:disabled{background-color:unset}.react-time-picker__inputGroup__input::-webkit-outer-spin-button{appearance:none;margin:0}.react-time-picker__inputGroup__input::-webkit-inner-spin-button{appearance:none;margin:0}.react-time-picker__inputGroup__input--hasLeadingZero{margin-left:-.54em;padding-left:calc(1px + .54em)}.react-time-picker__button{border:0;padding:4px 4px 4px 7px}.react-time-picker__button:hover{background:0 0}.react-time-picker__wrapper{padding:6px 24px 6px 8px}.react-time-picker__inputGroup__input:invalid{background:#ff00001a}.react-time-picker__inputGroup__amPm{font:inherit;appearance:menulist}.react-time-picker__button:enabled{cursor:pointer}.react-time-picker__button:enabled:hover .react-time-picker__button__icon,.react-time-picker__button:enabled:focus .react-time-picker__button__icon{stroke:#0078d7}.react-time-picker__button:disabled .react-time-picker__button__icon{stroke:#6d6d6d}.react-time-picker__button svg{display:inherit}.react-time-picker__clock{z-index:1;background-color:#fff;border:thin solid #a0a096;width:200px;max-width:100vw;height:200px;padding:25px}.react-time-picker__clock--closed,.timePicker .react-time-picker__clock{display:none}.timePicker .timePicker__field{position:relative}.timePicker .timePicker__field .input-view-toggle{padding:4px;line-height:1;position:absolute;top:50%;right:4px;transform:translateY(-50%)}.timePicker__display{background-color:var(--white);border:1px solid var(--gray400);z-index:1;border-radius:8px;height:160px;display:inline-flex;position:relative}.timePicker__display:before,.timePicker__display:after{content:"";z-index:1;pointer-events:none;height:calc(50% - 16px);display:block;position:absolute;left:0;right:0}.timePicker__display:before{border-bottom:.5px solid rgba(var(--text-high-contrast-rgb-value), .3);background:linear-gradient(to top, rgba(var(--background-site-rgb-value), .65) 0%, rgba(var(--background-site-rgb-value), 1) 100%);top:-.5px}.timePicker__display:after{border-top:.5px solid rgba(var(--text-high-contrast-rgb-value), .3);background:linear-gradient(to bottom, rgba(var(--background-site-rgb-value), .65) 0%, rgba(var(--background-site-rgb-value), 1) 100%);bottom:-.5px}.timePicker__display .ios-picker{flex-direction:row;align-items:center;gap:6px;height:100%;padding:0 12px;font-size:16px;line-height:1;display:flex}.timePicker__display .ios-picker--disabled{pointer-events:none;opacity:.5}.timePicker__display .ios-picker__scene{touch-action:pan-x;align-items:center;min-width:30px;height:100%;display:flex;overflow:hidden}.timePicker__display .ios-picker__viewport{perspective:1000px;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-khtml-user-select:none;-webkit-tap-highlight-color:transparent;width:100%;height:32px}.timePicker__display .ios-picker__viewport--perspective-left{perspective-origin:calc(50% + 130px);transform:translate(27px)}.timePicker__display .ios-picker__viewport--perspective-right{perspective-origin:calc(50% - 130px);transform:translate(-27px)}.timePicker__display .ios-picker__viewport--perspective-center{perspective-origin:50%}.timePicker__display .ios-picker__container{width:100%;height:100%;transform-style:preserve-3d;will-change:transform}.timePicker__display .ios-picker__slide{text-align:center;backface-visibility:hidden;opacity:0;justify-content:center;align-items:center;width:100%;height:100%;display:flex}.timePicker__display .ios-picker__label{white-space:nowrap;pointer-events:none;font-weight:700}}

package/src/components/TimePicker/TimePicker.d.ts

@@ -0,0 +1,13 @@
+import { default as React } from 'react';
+import { TimePickerProps as ReactTimePickerProps } from 'react-time-picker';
+import { LabeledInput } from '../Input/InputWrapper';
+type TimePickerProps = Omit<ReactTimePickerProps, "locale" | "format"> & LabeledInput & {
+    locale?: Intl.LocalesArgument;
+    format?: 24 | 12;
+    labels?: {
+        hour?: string;
+        minute?: string;
+    };
+};
+export declare const TimePicker: React.FC<TimePickerProps>;
+export {};