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

package/src/components/SortableList/SortableList.scss

@@ -0,0 +1,41 @@
+@use "../../styles/utilities/_functions" as u;
+
+@layer craftsman-component {
+    .sortable-list {
+        display: flex;
+        flex-direction: column;
+        gap: #{u.width("gutter", 0.25)};
+        margin: 0;
+        padding: 0;
+        list-style: none;
+    }
+
+    .sortable-list-item {
+        position: relative;
+        cursor: grab;
+        transition: transform 200ms ease, opacity 150ms ease;
+
+        &.dragging {
+            opacity: 0.4;
+        }
+
+        &.drop-top::before,
+        &.drop-bottom::after {
+            content: "";
+            position: absolute;
+            left: 0;
+            right: 0;
+            height: 2px;
+            border-radius: 1px;
+            background-color: #{u.color("blue500")};
+        }
+
+        &.drop-top::before {
+            top: -1px;
+        }
+
+        &.drop-bottom::after {
+            bottom: -1px;
+        }
+    }
+}

package/src/components/SortableList/SortableList2.esm.js

@@ -0,0 +1,54 @@
+"use client";
+import { monitorForElements as e } from "../../../node_modules/@atlaskit/pragmatic-drag-and-drop/dist/esm/adapter/element-adapter.esm.js";
+import { reorder as t } from "../../../node_modules/@atlaskit/pragmatic-drag-and-drop/dist/esm/public-utils/reorder.esm.js";
+import './SortableList.css';/* empty css                 */
+import { isItemData as n } from "./utilities.esm.js";
+import { SortableListItem as r } from "./ListItem.esm.js";
+import i from "clsx";
+import { jsx as a } from "react/jsx-runtime";
+import { useEffect as o, useId as s } from "react";
+//#region src/components/SortableList/SortableList.tsx
+var c = ({ items: c, getKey: l, renderItem: u, onReorder: d, disabled: f, className: p, style: m, listId: h, onReceive: g }) => {
+	let _ = s(), v = h ?? _, y = (e, n) => {
+		let r = c.findIndex((t, n) => l(t, n) === e), i = c.findIndex((e, t) => l(e, t) === n);
+		r === -1 || i === -1 || r === i || d(t({
+			list: c,
+			startIndex: r,
+			finishIndex: i
+		}));
+	}, b = (e) => {
+		let t = c.findIndex((t, n) => l(t, n) === e);
+		t !== -1 && d(c.filter((e, n) => n !== t));
+	}, x = (e, t) => {
+		let n = c.findIndex((e, n) => l(e, n) === t);
+		g?.(e, n === -1 ? c.length : n);
+	};
+	return o(() => {
+		if (!f) return e({ onDrop: ({ source: e, location: t }) => {
+			let r = t.current.dropTargets[0];
+			if (!r || !n(e.data) || !n(r.data)) return;
+			let i = e.data.listId, a = r.data.listId, o = i === v, s = a === v;
+			o && s ? y(e.data.key, r.data.key) : o ? b(e.data.key) : s && g && x(e.data.item, r.data.key);
+		} });
+	}, [
+		c,
+		l,
+		d,
+		f,
+		v,
+		g
+	]), /* @__PURE__ */ a("ul", {
+		className: i("sortable-list", p),
+		style: m,
+		children: c.map((e, t) => /* @__PURE__ */ a(r, {
+			item: e,
+			index: t,
+			getKey: l,
+			renderItem: u,
+			disabled: f,
+			listId: v
+		}, l(e, t)))
+	});
+};
+//#endregion
+export { c as SortableList };

package/src/components/SortableList/utilities.d.ts

@@ -0,0 +1,7 @@
+export type ItemData = {
+    key: string;
+    index: number;
+    listId: string;
+    item: unknown;
+};
+export declare const isItemData: (data: Record<string | symbol, unknown>) => data is ItemData;

package/src/components/SortableList/utilities.esm.js

@@ -0,0 +1,4 @@
+//#region src/components/SortableList/utilities.ts
+var e = (e) => typeof e.key == "string" && typeof e.index == "number" && typeof e.listId == "string";
+//#endregion
+export { e as isItemData };

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);margin:0 0 var(--w-gutter) 0;line-height:1.2}h2{font-size:calc(var(--w-text) * 2.625);margin:0 0 var(--w-gutter) 0;font-weight:625;line-height:1.1}h3{font-size:calc(var(--w-text) * 1.625);margin:0 0 calc(var(--w-gutter) * .75) 0;line-height:1.1}h4{font-size:calc(var(--w-text) * 1.25);margin:0 0 calc(var(--w-gutter) * .5) 0;line-height:1.1}h5{font-size:var(--w-text);margin:0 0 calc(var(--w-gutter) * .5) 0;line-height:1.2}h6{font-size:calc(var(--w-text) * .875);margin:0;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);margin:0 0 calc(var(--w-gutter) * .75) 0;line-height:1.1}.text.display.xlarge{font-size:calc(var(--w-text) * 3.125);margin:0 0 var(--w-gutter) 0;line-height:1.2}.text.display.large{font-size:calc(var(--w-text) * 2.625);margin:0 0 var(--w-gutter) 0;font-weight:625;line-height:1.1}.text.display.small{font-size:calc(var(--w-text) * 1.25);margin:0 0 calc(var(--w-gutter) * .5) 0;line-height:1.1}.text.heading{font-size:calc(var(--w-text) * 1.625);margin:0 0 calc(var(--w-gutter) * .75) 0;line-height:1.1}.text.heading.xlarge{font-size:calc(var(--w-text) * 3.125);margin:0 0 var(--w-gutter) 0;line-height:1.2}.text.heading.large,.text.xlarge{font-size:calc(var(--w-text) * 2.625);margin:0 0 var(--w-gutter) 0;font-weight:625;line-height:1.1}.text.heading.medium{font-size:calc(var(--w-text) * 1.625);margin:0 0 calc(var(--w-gutter) * .75) 0;line-height:1.1}.text.heading.small{font-size:calc(var(--w-text) * 1.25);margin:0 0 calc(var(--w-gutter) * .5) 0;line-height:1.1}.text.heading.xsmall{font-size:var(--w-text);margin:0 0 calc(var(--w-gutter) * .5) 0;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);margin:0 0 calc(var(--w-gutter) * .75) 0;line-height:1.1}.text.paragraph.large{font-size:calc(var(--w-text) * 1.25);margin:0 0 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 {};

package/src/components/TimePicker/TimePicker.scss

@@ -0,0 +1,226 @@
+@use "../../styles/utilities/_functions" as u;
+@use "../../styles/global/components/input";
+@use "../../styles/utilities/_placeholders";
+@use "../DatePicker/_DatePicker";
+
+@layer craftsman-component {
+    .react-time-picker,
+    .react-time-picker *,
+    .react-time-picker *:before,
+    .react-time-picker *:after {
+        @extend %border-box;
+    }
+
+    .react-time-picker {
+        @extend %date-picker-styles;
+        &--disabled {
+            @extend %date-picker-disabled;
+        }   
+        &__wrapper {
+            @extend %date-picker-wrapper;
+            padding: 6px 24px 6px 8px;
+        }  
+        &__inputGroup {
+            @extend %date-picker-input-group;
+        }   
+        &__inputGroup__divider {
+            @extend %date-picker-divider;
+        }
+        &__inputGroup__divider,
+        &__inputGroup__leadingZero {
+            @extend %date-picker-leading-zero-divider;
+        }
+        &__inputGroup__input {
+            @extend %date-picker-group-input;
+        }
+        &__inputGroup__input::-webkit-outer-spin-button,
+        &__inputGroup__input::-webkit-inner-spin-button {
+            @extend %date-picker-input-spinner;
+        }
+        &__inputGroup__input--hasLeadingZero {
+            @extend %date-picker-input-leading-zero;
+        }
+        &__button {
+            @extend %date-picker-button;
+        }
+    }
+
+    .react-time-picker__inputGroup__input:invalid {
+        background: rgba(255, 0, 0, 0.1);
+    }
+
+    .react-time-picker__inputGroup__amPm {
+        font: inherit;
+        -webkit-appearance: menulist;
+        -moz-appearance: menulist;
+        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 {
+        width: 200px;
+        height: 200px;
+        max-width: 100vw;
+        padding: 25px;
+        background-color: white;
+        border: thin solid #a0a096;
+        z-index: 1;
+    }
+
+    .react-time-picker__clock--closed {
+        display: none;
+    }
+
+    .timePicker {
+        // suppress the built-in clock popup — our custom wheel renders instead
+        .react-time-picker__clock {
+            display: none;
+        }
+
+        .timePicker__field {
+            position: relative;
+
+            .input-view-toggle {
+                position: absolute;
+                right: 4px;
+                top: 50%;
+                transform: translateY(-50%);
+                padding: 4px;
+                line-height: 1;
+            }
+        }
+
+        &__display {
+            position: relative;
+            display: inline-flex;
+            height: 160px;
+            background-color: #{u.color("white")};
+            border: 1px solid #{u.color("gray400")};
+            border-radius: 8px;
+            z-index: 1;
+            &:before,
+            &:after {
+                position: absolute;
+                left: 0;
+                right: 0;
+                content: "";
+                display: block;
+                height: calc(50% - 32px / 2);
+                z-index: 1;
+                pointer-events: none;
+            }
+
+            &:before {
+                top: -0.5px;
+                border-bottom: 0.5px solid rgba(var(--text-high-contrast-rgb-value), 0.3);
+                background: linear-gradient(
+                    to top,
+                    rgba(var(--background-site-rgb-value), 0.65) 0%,
+                    rgba(var(--background-site-rgb-value), 1) 100%
+                );
+            }
+
+            &:after {
+                bottom: -0.5px;
+                border-top: 0.5px solid rgba(var(--text-high-contrast-rgb-value), 0.3);
+                background: linear-gradient(
+                    to bottom,
+                    rgba(var(--background-site-rgb-value), 0.65) 0%,
+                    rgba(var(--background-site-rgb-value), 1) 100%
+                );
+            }
+
+            .ios-picker {
+                height: 100%;
+                display: flex;
+                flex-direction: row;
+                align-items: center;
+                gap: 6px;
+                padding: 0 12px;
+                line-height: 1;
+                font-size: 16px;
+
+                &--disabled {
+                    pointer-events: none;
+                    opacity: 0.5;
+                }
+            }
+
+            .ios-picker__scene {
+                min-width: 30px;
+                height: 100%;
+                overflow: hidden;
+                display: flex;
+                align-items: center;
+                touch-action: pan-x;
+            }
+
+            .ios-picker__viewport {
+                height: 32px;
+                width: 100%;
+                perspective: 1000px;
+                -webkit-user-select: none;
+                -moz-user-select: none;
+                -ms-user-select: none;
+                user-select: none;
+                -webkit-touch-callout: none;
+                -khtml-user-select: none;
+                -webkit-tap-highlight-color: transparent;
+            }
+
+            .ios-picker__viewport--perspective-left {
+                perspective-origin: calc(50% + 130px) 50%;
+                transform: translateX(27px);
+            }
+
+            .ios-picker__viewport--perspective-right {
+                perspective-origin: calc(50% - 130px) 50%;
+                transform: translateX(-27px);
+            }
+
+            .ios-picker__viewport--perspective-center {
+                perspective-origin: 50% 50%;
+            }
+
+            .ios-picker__container {
+                height: 100%;
+                width: 100%;
+                transform-style: preserve-3d;
+                will-change: transform;
+            }
+
+            .ios-picker__slide {
+                width: 100%;
+                height: 100%;
+                text-align: center;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                backface-visibility: hidden;
+                opacity: 0;
+            }
+
+            .ios-picker__label {
+                font-weight: 700;
+                white-space: nowrap;
+                pointer-events: none;
+            }
+        }
+    }
+}