@pyck/react 0.0.1

package/dist/components/scroll-area/index.d.ts

@@ -0,0 +1,23 @@
+import * as react from "react";
+import { ComponentProps } from "react";
+import * as _pyck_styled_system_jsx0 from "@pyck/styled-system/jsx";
+import * as _pyck_styled_system_recipes0 from "@pyck/styled-system/recipes";
+import { ScrollArea as ScrollArea$1 } from "@ark-ui/react/scroll-area";
+
+//#region src/components/scroll-area/scroll-area.d.ts
+type RootProps = ComponentProps<typeof Root>;
+type ContentProps = ComponentProps<typeof Content>;
+declare const Root: _pyck_styled_system_jsx0.StyleContextProvider<react.ForwardRefExoticComponent<ScrollArea$1.RootProps & react.RefAttributes<HTMLDivElement>>, _pyck_styled_system_recipes0.ScrollAreaRecipe>;
+declare const Content: _pyck_styled_system_jsx0.StyleContextConsumer<react.ForwardRefExoticComponent<ScrollArea$1.ContentProps & react.RefAttributes<HTMLDivElement>>>;
+//#endregion
+//#region src/components/scroll-area/scroll-area.closed.d.ts
+interface ScrollAreaProps extends RootProps {
+  /**
+   * @default 'both'
+   */
+  scrollbars?: 'vertical' | 'horizontal' | 'both';
+  contentProps?: ContentProps;
+}
+declare const ScrollArea: react.ForwardRefExoticComponent<Omit<ScrollAreaProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { ScrollArea, type ScrollAreaProps };

package/dist/components/scroll-area/index.js

@@ -0,0 +1,41 @@
+import { t as __exportAll } from "../../chunk-BYypO7fO.js";
+import { forwardRef } from "react";
+import { createStyleContext } from "@pyck/styled-system/jsx";
+import { scrollArea } from "@pyck/styled-system/recipes";
+import { ScrollArea as ScrollArea$1 } from "@ark-ui/react/scroll-area";
+
+//#region src/components/scroll-area/scroll-area.tsx
+var scroll_area_exports = /* @__PURE__ */ __exportAll({
+	Content: () => Content,
+	Corner: () => Corner,
+	Root: () => Root,
+	Scrollbar: () => Scrollbar,
+	Thumb: () => Thumb,
+	Viewport: () => Viewport
+});
+const { withProvider, withContext } = createStyleContext(scrollArea);
+const Root = withProvider(ScrollArea$1.Root, "root");
+const Content = withContext(ScrollArea$1.Content, "content");
+const Corner = withContext(ScrollArea$1.Corner, "corner");
+const Thumb = withContext(ScrollArea$1.Thumb, "thumb");
+const Scrollbar = withContext(ScrollArea$1.Scrollbar, "scrollbar", { defaultProps: { children: <Thumb /> } });
+const Viewport = withContext(ScrollArea$1.Viewport, "viewport");
+
+//#endregion
+//#region src/components/scroll-area/scroll-area.closed.tsx
+const ScrollArea = forwardRef(function ScrollArea(props, ref) {
+	const { children, scrollbars = "both", contentProps, ...rest } = props;
+	const showVertical = scrollbars === "vertical" || scrollbars === "both";
+	const showHorizontal = scrollbars === "horizontal" || scrollbars === "both";
+	return <scroll_area_exports.Root {...rest}>
+        <scroll_area_exports.Viewport ref={ref}>
+          <scroll_area_exports.Content {...contentProps}>{children}</scroll_area_exports.Content>
+        </scroll_area_exports.Viewport>
+        {showVertical && <scroll_area_exports.Scrollbar orientation="vertical" />}
+        {showHorizontal && <scroll_area_exports.Scrollbar orientation="horizontal" />}
+        {showVertical && showHorizontal && <scroll_area_exports.Corner />}
+      </scroll_area_exports.Root>;
+});
+
+//#endregion
+export { ScrollArea };

package/dist/components/segment-group/index.d.ts

@@ -0,0 +1,32 @@
+import * as react from "react";
+import { ComponentProps, ReactNode } from "react";
+import * as _pyck_styled_system_jsx0 from "@pyck/styled-system/jsx";
+import * as _pyck_styled_system_recipes0 from "@pyck/styled-system/recipes";
+import { SegmentGroup, SegmentGroupContext as Context } from "@ark-ui/react/segment-group";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components/segment-group/segment-group.d.ts
+declare namespace segment_group_d_exports {
+  export { Context, Indicator, Item, ItemControl, ItemHiddenInput, ItemText, Items, ItemsProps, Label, Root, RootProps, RootProvider };
+}
+type RootProps = ComponentProps<typeof Root>;
+declare const Root: _pyck_styled_system_jsx0.StyleContextProvider<react.ForwardRefExoticComponent<SegmentGroup.RootProps & react.RefAttributes<HTMLDivElement>>, _pyck_styled_system_recipes0.SegmentGroupRecipe>;
+declare const RootProvider: _pyck_styled_system_jsx0.StyleContextProvider<react.ForwardRefExoticComponent<SegmentGroup.RootProviderProps & react.RefAttributes<HTMLDivElement>>, _pyck_styled_system_recipes0.SegmentGroupRecipe>;
+declare const Indicator: _pyck_styled_system_jsx0.StyleContextConsumer<react.ForwardRefExoticComponent<SegmentGroup.IndicatorProps & react.RefAttributes<HTMLDivElement>>>;
+declare const Item: _pyck_styled_system_jsx0.StyleContextConsumer<react.ForwardRefExoticComponent<SegmentGroup.ItemProps & react.RefAttributes<HTMLLabelElement>>>;
+declare const ItemControl: _pyck_styled_system_jsx0.StyleContextConsumer<react.ForwardRefExoticComponent<SegmentGroup.ItemControlProps & react.RefAttributes<HTMLDivElement>>>;
+declare const ItemHiddenInput: react.ForwardRefExoticComponent<SegmentGroup.ItemHiddenInputProps & react.RefAttributes<HTMLInputElement>>;
+declare const ItemText: _pyck_styled_system_jsx0.StyleContextConsumer<react.ForwardRefExoticComponent<SegmentGroup.ItemTextProps & react.RefAttributes<HTMLSpanElement>>>;
+declare const Label: _pyck_styled_system_jsx0.StyleContextConsumer<react.ForwardRefExoticComponent<SegmentGroup.LabelProps & react.RefAttributes<HTMLLabelElement>>>;
+interface Item {
+  value: string;
+  label: ReactNode;
+  disabled?: boolean | undefined;
+}
+type ItemProps = ComponentProps<typeof Item>;
+interface ItemsProps extends Omit<ItemProps, 'value'> {
+  items: Array<string | Item>;
+}
+declare const Items: (props: ItemsProps) => react_jsx_runtime0.JSX.Element[];
+//#endregion
+export { segment_group_d_exports as SegmentGroup };

package/dist/components/segment-group/index.js

@@ -0,0 +1,46 @@
+import { t as __exportAll } from "../../chunk-BYypO7fO.js";
+import { n as isString } from "../../function-DOGwA2sm.js";
+import { useMemo } from "react";
+import { createStyleContext } from "@pyck/styled-system/jsx";
+import { segmentGroup } from "@pyck/styled-system/recipes";
+import { SegmentGroup, SegmentGroupContext as Context } from "@ark-ui/react/segment-group";
+
+//#region src/components/segment-group/segment-group.tsx
+var segment_group_exports = /* @__PURE__ */ __exportAll({
+	Context: () => Context,
+	Indicator: () => Indicator,
+	Item: () => Item,
+	ItemControl: () => ItemControl,
+	ItemHiddenInput: () => ItemHiddenInput,
+	ItemText: () => ItemText,
+	Items: () => Items,
+	Label: () => Label,
+	Root: () => Root,
+	RootProvider: () => RootProvider
+});
+const { withProvider, withContext } = createStyleContext(segmentGroup);
+const Root = withProvider(SegmentGroup.Root, "root", {
+	defaultProps: { orientation: "horizontal" },
+	forwardProps: ["orientation"]
+});
+const RootProvider = withProvider(SegmentGroup.RootProvider, "root");
+const Indicator = withContext(SegmentGroup.Indicator, "indicator");
+const Item = withContext(SegmentGroup.Item, "item");
+const ItemControl = withContext(SegmentGroup.ItemControl, "itemControl");
+const ItemHiddenInput = SegmentGroup.ItemHiddenInput;
+const ItemText = withContext(SegmentGroup.ItemText, "itemText");
+const Label = withContext(SegmentGroup.Label, "label");
+const Items = (props) => {
+	const { items, ...itemProps } = props;
+	return useMemo(() => normalize(items), [items]).map((item) => <Item key={item.value} value={item.value} disabled={item.disabled} {...itemProps}>
+      <ItemText>{item.label}</ItemText>
+      <ItemHiddenInput />
+    </Item>);
+};
+const normalize = (items) => items.map((item) => isString(item) ? {
+	value: item,
+	label: item
+} : item);
+
+//#endregion
+export { segment_group_exports as SegmentGroup };

package/dist/components/select/index.d.ts

@@ -0,0 +1,54 @@
+import { createListCollection } from "@ark-ui/react/collection";
+import * as react from "react";
+import { ReactNode, RefAttributes } from "react";
+import * as _pyck_styled_system_jsx0 from "@pyck/styled-system/jsx";
+import { SelectVariantProps } from "@pyck/styled-system/recipes";
+import { FieldProps } from "@pyck/react/field";
+import * as _ark_ui_react0 from "@ark-ui/react";
+import { Assign, CollectionItem, SelectRootProps } from "@ark-ui/react";
+import { Select } from "@pyck/react/select";
+import { Select as Select$1, SelectContext as Context, SelectItemContext as ItemContext, SelectValueChangeDetails as ValueChangeDetails, useListCollection } from "@ark-ui/react/select";
+import * as _pyck_styled_system_types0 from "@pyck/styled-system/types";
+import { HTMLStyledProps as HTMLStyledProps$1 } from "@pyck/styled-system/types";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components/select/select.d.ts
+declare namespace select_d_exports {
+  export { ClearTrigger, Content, Context, Control, HiddenSelect, Indicator, IndicatorGroup, Item$1 as Item, ItemContext, ItemGroup, ItemGroupLabel, ItemIndicator$1 as ItemIndicator, ItemText, Label, List, Positioner, Root$1 as Root, RootProps$1 as RootProps, Trigger, ValueChangeDetails, ValueText };
+}
+type StyleProps = SelectVariantProps & HTMLStyledProps$1<'div'>;
+type RootProps$1<T> = Assign<SelectRootProps<T>, StyleProps> & RefAttributes<HTMLDivElement>;
+declare const Root$1: Select$1.RootComponent<StyleProps>;
+declare const ClearTrigger: _pyck_styled_system_jsx0.StyleContextConsumer<react.ForwardRefExoticComponent<Select$1.ClearTriggerProps & RefAttributes<HTMLButtonElement>>>;
+declare const Content: _pyck_styled_system_jsx0.StyleContextConsumer<react.ForwardRefExoticComponent<Select$1.ContentProps & RefAttributes<HTMLDivElement>>>;
+declare const Control: _pyck_styled_system_jsx0.StyleContextConsumer<react.ForwardRefExoticComponent<Select$1.ControlProps & RefAttributes<HTMLDivElement>>>;
+declare const IndicatorGroup: _pyck_styled_system_jsx0.StyleContextConsumer<react.ForwardRefExoticComponent<react.ClassAttributes<HTMLDivElement> & react.HTMLAttributes<HTMLDivElement> & _ark_ui_react0.PolymorphicProps>>;
+declare const Item$1: _pyck_styled_system_jsx0.StyleContextConsumer<react.ForwardRefExoticComponent<Select$1.ItemProps & RefAttributes<HTMLDivElement>>>;
+declare const ItemGroup: _pyck_styled_system_jsx0.StyleContextConsumer<react.ForwardRefExoticComponent<Select$1.ItemGroupProps & RefAttributes<HTMLDivElement>>>;
+declare const ItemGroupLabel: _pyck_styled_system_jsx0.StyleContextConsumer<react.ForwardRefExoticComponent<Select$1.ItemGroupLabelProps & RefAttributes<HTMLDivElement>>>;
+declare const ItemText: _pyck_styled_system_jsx0.StyleContextConsumer<react.ForwardRefExoticComponent<Select$1.ItemTextProps & RefAttributes<HTMLDivElement>>>;
+declare const Label: _pyck_styled_system_jsx0.StyleContextConsumer<react.ForwardRefExoticComponent<Select$1.LabelProps & RefAttributes<HTMLLabelElement>>>;
+declare const List: _pyck_styled_system_jsx0.StyleContextConsumer<react.ForwardRefExoticComponent<Select$1.ListProps & RefAttributes<HTMLDivElement>>>;
+declare const Positioner: _pyck_styled_system_jsx0.StyleContextConsumer<react.ForwardRefExoticComponent<Select$1.PositionerProps & RefAttributes<HTMLDivElement>>>;
+declare const Trigger: _pyck_styled_system_jsx0.StyleContextConsumer<react.ForwardRefExoticComponent<Select$1.TriggerProps & RefAttributes<HTMLButtonElement>>>;
+declare const ValueText: _pyck_styled_system_jsx0.StyleContextConsumer<react.ForwardRefExoticComponent<Select$1.ValueTextProps & RefAttributes<HTMLSpanElement>>>;
+declare const Indicator: _pyck_styled_system_jsx0.StyleContextConsumer<react.ForwardRefExoticComponent<Select$1.IndicatorProps & RefAttributes<HTMLDivElement>>>;
+declare const HiddenSelect: react.ForwardRefExoticComponent<Select$1.HiddenSelectProps & RefAttributes<HTMLSelectElement>>;
+declare const ItemIndicator$1: react.ForwardRefExoticComponent<Omit<HTMLStyledProps$1<"div">, "ref"> & RefAttributes<HTMLDivElement>>;
+declare namespace select_field_d_exports {
+  export { Item, ItemIndicator, Root, RootProps };
+}
+interface RootProps<T> extends Omit<Select.RootProps<T>, 'onValueChange' | 'name' | 'onBlur' | 'value' | 'onInteractOutside'> {
+  name: string;
+  label: FieldProps['label'];
+  helperText?: FieldProps['helperText'];
+  hideLabel?: boolean;
+  placeholder?: string;
+  children?: ReactNode;
+  required?: boolean;
+}
+declare const Root: <T extends CollectionItem>(props: RootProps<T>) => react_jsx_runtime0.JSX.Element;
+declare const Item: _pyck_styled_system_jsx0.StyleContextConsumer<react.ForwardRefExoticComponent<_ark_ui_react0.SelectItemProps & react.RefAttributes<HTMLDivElement>>>;
+declare const ItemIndicator: react.ForwardRefExoticComponent<Omit<_pyck_styled_system_types0.HTMLStyledProps<"div">, "ref"> & react.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { select_d_exports as Select, select_field_d_exports as SelectField, createListCollection, useListCollection };

package/dist/components/select/index.js

@@ -0,0 +1,93 @@
+import { t as __exportAll } from "../../chunk-BYypO7fO.js";
+import { createListCollection } from "@ark-ui/react/collection";
+import { forwardRef } from "react";
+import { ark } from "@ark-ui/react/factory";
+import { createStyleContext } from "@pyck/styled-system/jsx";
+import { select } from "@pyck/styled-system/recipes";
+import { CheckIcon, ChevronsUpDownIcon } from "lucide-react";
+import { Field } from "@pyck/react/field";
+import { Controller, useFormContext } from "react-hook-form";
+import { Show } from "@pyck/react/show";
+import { Select } from "@pyck/react/select";
+import { Select as Select$1, SelectContext as Context, SelectItemContext as ItemContext, useListCollection, useSelectItemContext } from "@ark-ui/react/select";
+
+//#region src/components/select/select.tsx
+var select_exports = /* @__PURE__ */ __exportAll({
+	ClearTrigger: () => ClearTrigger,
+	Content: () => Content,
+	Context: () => Context,
+	Control: () => Control,
+	HiddenSelect: () => HiddenSelect,
+	Indicator: () => Indicator,
+	IndicatorGroup: () => IndicatorGroup,
+	Item: () => Item$1,
+	ItemContext: () => ItemContext,
+	ItemGroup: () => ItemGroup,
+	ItemGroupLabel: () => ItemGroupLabel,
+	ItemIndicator: () => ItemIndicator$1,
+	ItemText: () => ItemText,
+	Label: () => Label,
+	List: () => List,
+	Positioner: () => Positioner,
+	Root: () => Root$1,
+	Trigger: () => Trigger,
+	ValueText: () => ValueText
+});
+const { withProvider, withContext } = createStyleContext(select);
+const Root$1 = withProvider(Select$1.Root, "root");
+const ClearTrigger = withContext(Select$1.ClearTrigger, "clearTrigger");
+const Content = withContext(Select$1.Content, "content");
+const Control = withContext(Select$1.Control, "control");
+const IndicatorGroup = withContext(ark.div, "indicatorGroup");
+const Item$1 = withContext(Select$1.Item, "item");
+const ItemGroup = withContext(Select$1.ItemGroup, "itemGroup");
+const ItemGroupLabel = withContext(Select$1.ItemGroupLabel, "itemGroupLabel");
+const ItemText = withContext(Select$1.ItemText, "itemText");
+const Label = withContext(Select$1.Label, "label");
+const List = withContext(Select$1.List, "list");
+const Positioner = withContext(Select$1.Positioner, "positioner");
+const Trigger = withContext(Select$1.Trigger, "trigger");
+const ValueText = withContext(Select$1.ValueText, "valueText");
+const Indicator = withContext(Select$1.Indicator, "indicator", { defaultProps: { children: <ChevronsUpDownIcon /> } });
+const HiddenSelect = Select$1.HiddenSelect;
+const StyledItemIndicator = withContext(Select$1.ItemIndicator, "itemIndicator");
+const ItemIndicator$1 = forwardRef(function ItemIndicator(props, ref) {
+	const item = useSelectItemContext();
+	return <Show when={item.selected} fallback={<svg aria-hidden="true" focusable="false" />}>
+        <StyledItemIndicator ref={ref} {...props}>
+          <CheckIcon />
+        </StyledItemIndicator>
+      </Show>;
+});
+
+//#endregion
+//#region src/components/select/select.field.tsx
+var select_field_exports = /* @__PURE__ */ __exportAll({
+	Item: () => Item,
+	ItemIndicator: () => ItemIndicator,
+	Root: () => Root
+});
+const Root = (props) => {
+	const { name, label, placeholder, hideLabel, helperText, disabled, required, ...selectProps } = props;
+	const { control } = useFormContext();
+	return <Controller name={name} control={control} render={({ field, fieldState }) => <Field label={label} helperText={helperText} hideLabel={hideLabel} disabled={field.disabled || disabled} invalid={!!fieldState.error} errorText={fieldState.error?.message} required={required}>
+          <Select.Root {...selectProps} name={field.name} onBlur={field.onBlur} onInteractOutside={field.onBlur} onValueChange={({ value }) => field.onChange(selectProps.multiple ? value : value[0])} value={[field.value].flat().filter(Boolean)}>
+            <Select.Control>
+              <Select.Trigger>
+                <Select.ValueText placeholder={placeholder} />
+                <Select.IndicatorGroup>
+                  <Select.Indicator />
+                </Select.IndicatorGroup>
+              </Select.Trigger>
+            </Select.Control>
+            <Select.Positioner>
+              <Select.Content>{props.children}</Select.Content>
+            </Select.Positioner>
+          </Select.Root>
+        </Field>} />;
+};
+const Item = Select.Item;
+const ItemIndicator = Select.ItemIndicator;
+
+//#endregion
+export { select_exports as Select, select_field_exports as SelectField, createListCollection, useListCollection };

package/dist/components/show/index.d.ts

@@ -0,0 +1,11 @@
+import { ReactNode } from "react";
+
+//#region src/components/show/show.d.ts
+interface ShowProps<T = unknown> {
+  when: T | null | undefined;
+  fallback?: ReactNode;
+  children: ReactNode | ((value: T) => ReactNode);
+}
+declare function Show<T = unknown>(props: ShowProps<T>): ReactNode;
+//#endregion
+export { Show, type ShowProps };

package/dist/components/show/index.js

@@ -0,0 +1,3 @@
+import { t as Show } from "../../show-IaI-36v9.js";
+
+export { Show };

package/dist/components/skeleton/index.d.ts

@@ -0,0 +1,23 @@
+import * as react from "react";
+import { ComponentProps } from "react";
+import { StackProps } from "@pyck/styled-system/jsx";
+import * as _pyck_styled_system_recipes0 from "@pyck/styled-system/recipes";
+import * as _ark_ui_react0 from "@ark-ui/react";
+import * as _pyck_styled_system_types0 from "@pyck/styled-system/types";
+
+//#region src/components/skeleton/skeleton.d.ts
+type SkeletonProps = ComponentProps<typeof Skeleton>;
+declare const Skeleton: _pyck_styled_system_types0.StyledComponent<react.ForwardRefExoticComponent<react.ClassAttributes<HTMLDivElement> & react.HTMLAttributes<HTMLDivElement> & _ark_ui_react0.PolymorphicProps>, _pyck_styled_system_recipes0.SkeletonVariantProps>;
+type SkeletonCircleProps = ComponentProps<typeof SkeletonCircle>;
+declare const SkeletonCircle: _pyck_styled_system_types0.StyledComponent<react.ForwardRefExoticComponent<react.ClassAttributes<HTMLDivElement> & react.HTMLAttributes<HTMLDivElement> & _ark_ui_react0.PolymorphicProps>, _pyck_styled_system_recipes0.SkeletonVariantProps>;
+interface SkeletonTextProps extends SkeletonProps {
+  /**
+   * Number of lines to display
+   * @default 3
+   */
+  noOfLines?: number | undefined;
+  rootProps?: StackProps | undefined;
+}
+declare const SkeletonText: react.ForwardRefExoticComponent<Omit<SkeletonTextProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { Skeleton, SkeletonCircle, type SkeletonCircleProps, type SkeletonProps, SkeletonText, type SkeletonTextProps };

package/dist/components/skeleton/index.js

@@ -0,0 +1,17 @@
+import { forwardRef } from "react";
+import { ark } from "@ark-ui/react/factory";
+import { Stack, styled } from "@pyck/styled-system/jsx";
+import { skeleton } from "@pyck/styled-system/recipes";
+
+//#region src/components/skeleton/skeleton.tsx
+const Skeleton = styled(ark.div, skeleton);
+const SkeletonCircle = styled(ark.div, skeleton, { defaultProps: { circle: true } });
+const SkeletonText = forwardRef(function SkeletonText(props, ref) {
+	const { noOfLines = 3, gap, rootProps, ...skeletonProps } = props;
+	return <Stack ref={ref} gap={gap} width="full" {...rootProps}>
+        {[...Array(noOfLines).keys()].map((index) => <Skeleton key={index} height="4" _last={{ maxW: noOfLines === 1 ? "100%" : "80%" }} {...skeletonProps} />)}
+      </Stack>;
+});
+
+//#endregion
+export { Skeleton, SkeletonCircle, SkeletonText };

package/dist/components/slider/index.d.ts

@@ -0,0 +1,31 @@
+import * as react from "react";
+import { ComponentProps, ReactNode } from "react";
+import * as _pyck_styled_system_jsx0 from "@pyck/styled-system/jsx";
+import * as _pyck_styled_system_recipes0 from "@pyck/styled-system/recipes";
+import * as _ark_ui_react0 from "@ark-ui/react";
+import { Slider as Slider$1 } from "@ark-ui/react/slider";
+
+//#region src/components/slider/slider.d.ts
+declare const Root: _pyck_styled_system_jsx0.StyleContextProvider<react.ForwardRefExoticComponent<Slider$1.RootProps & react.RefAttributes<HTMLDivElement>>, _pyck_styled_system_recipes0.SliderRecipe>;
+type RootProps = ComponentProps<typeof Root>;
+//#endregion
+//#region src/components/slider/sllider.closed.d.ts
+interface SliderProps extends RootProps {
+  /** Label text for the slider */
+  label: ReactNode;
+  /** Hides the label visually but keeps it accessible for screen readers */
+  hideLabel?: boolean;
+  /** Array of marks to display on the slider track */
+  marks?: Array<number | {
+    value: number;
+    label: ReactNode;
+  }>;
+  /** Shows the current value next to the label */
+  showValue?: boolean;
+  /** Children components to render within the Slider */
+  children?: ReactNode;
+}
+declare const Slider: react.ForwardRefExoticComponent<Omit<SliderProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
+declare const SliderContext: (props: _ark_ui_react0.SliderContextProps) => ReactNode;
+//#endregion
+export { Slider, SliderContext, type SliderProps };

package/dist/components/slider/index.js

@@ -0,0 +1,93 @@
+import { t as __exportAll } from "../../chunk-BYypO7fO.js";
+import { forwardRef } from "react";
+import { ark } from "@ark-ui/react/factory";
+import { HStack, VisuallyHidden, createStyleContext } from "@pyck/styled-system/jsx";
+import { slider } from "@pyck/styled-system/recipes";
+import { Show } from "@pyck/react/show";
+import { Wrap } from "@pyck/react/wrap";
+import { For } from "@pyck/react/for";
+import { Slider as Slider$1, SliderContext as Context, useSliderContext } from "@ark-ui/react/slider";
+
+//#region src/components/slider/slider.tsx
+var slider_exports = /* @__PURE__ */ __exportAll({
+	Context: () => Context,
+	Control: () => Control,
+	DraggingIndicator: () => DraggingIndicator,
+	HiddenInput: () => HiddenInput,
+	Label: () => Label,
+	Marker: () => Marker,
+	MarkerGroup: () => MarkerGroup,
+	MarkerIndicator: () => MarkerIndicator,
+	Marks: () => Marks,
+	Range: () => Range,
+	Root: () => Root,
+	Thumb: () => Thumb,
+	Thumbs: () => Thumbs,
+	Track: () => Track,
+	ValueText: () => ValueText
+});
+const { withProvider, withContext } = createStyleContext(slider);
+const Root = withProvider(Slider$1.Root, "root");
+const Control = withContext(Slider$1.Control, "control");
+const DraggingIndicator = withContext(Slider$1.DraggingIndicator, "draggingIndicator");
+const Label = withContext(Slider$1.Label, "label");
+const Marker = withContext(Slider$1.Marker, "marker");
+const MarkerIndicator = withContext(ark.div, "markerIndicator");
+const MarkerGroup = withContext(Slider$1.MarkerGroup, "markerGroup");
+const Range = withContext(Slider$1.Range, "range");
+const Thumb = withContext(Slider$1.Thumb, "thumb");
+const Track = withContext(Slider$1.Track, "track");
+const ValueText = withContext(Slider$1.ValueText, "valueText");
+const HiddenInput = Slider$1.HiddenInput;
+const Marks = forwardRef(function Marks(props, ref) {
+	const { marks, ...rest } = props;
+	if (!marks?.length) return null;
+	return <MarkerGroup ref={ref} {...rest}>
+      <For each={marks}>
+        {(mark, index) => {
+		const value = typeof mark === "number" ? mark : mark.value;
+		const label = typeof mark === "number" ? void 0 : mark.label;
+		return <Marker key={index} value={value}>
+              <MarkerIndicator />
+              {label != null && <span>{label}</span>}
+            </Marker>;
+	}}
+      </For>
+    </MarkerGroup>;
+});
+const Thumbs = (props) => {
+	const slider = useSliderContext();
+	return <For each={slider.value}>
+      {(_, index) => <Thumb key={index} index={index} {...props}>
+          <HiddenInput />
+        </Thumb>}
+    </For>;
+};
+
+//#endregion
+//#region src/components/slider/sllider.closed.tsx
+const Slider = forwardRef(function Slider(props, ref) {
+	const { label, hideLabel, showValue, children, marks, ...rest } = props;
+	return <slider_exports.Root ref={ref} {...rest}>
+      <Wrap when={hideLabel} with={(node) => <VisuallyHidden>{node}</VisuallyHidden>}>
+        <HStack justify="space-between">
+          <slider_exports.Label>{label}</slider_exports.Label>
+          <Show when={showValue}>
+            <slider_exports.ValueText />
+          </Show>
+        </HStack>
+      </Wrap>
+      <slider_exports.Control>
+        <slider_exports.Track>
+          <slider_exports.Range />
+        </slider_exports.Track>
+        <slider_exports.Thumbs />
+        <slider_exports.Marks marks={marks} />
+      </slider_exports.Control>
+      {children}
+    </slider_exports.Root>;
+});
+const SliderContext = Context;
+
+//#endregion
+export { Slider, SliderContext };

package/dist/components/span/index.d.ts

@@ -0,0 +1,8 @@
+import { ComponentProps } from "react";
+import * as _pyck_styled_system_types0 from "@pyck/styled-system/types";
+
+//#region src/components/span/span.d.ts
+type SpanProps = ComponentProps<typeof Span>;
+declare const Span: _pyck_styled_system_types0.StyledComponent<"span", {}>;
+//#endregion
+export { Span, type SpanProps };

package/dist/components/span/index.js

@@ -0,0 +1,3 @@
+import { t as Span } from "../../span-DWZSA3mH.js";
+
+export { Span };

package/dist/components/spinner/index.d.ts

@@ -0,0 +1,11 @@
+import * as react from "react";
+import { ComponentProps } from "react";
+import * as _pyck_styled_system_recipes0 from "@pyck/styled-system/recipes";
+import * as _ark_ui_react0 from "@ark-ui/react";
+import * as _pyck_styled_system_types0 from "@pyck/styled-system/types";
+
+//#region src/components/spinner/spinner.d.ts
+type SpinnerProps = ComponentProps<typeof Spinner>;
+declare const Spinner: _pyck_styled_system_types0.StyledComponent<react.ForwardRefExoticComponent<react.ClassAttributes<HTMLSpanElement> & react.HTMLAttributes<HTMLSpanElement> & _ark_ui_react0.PolymorphicProps>, _pyck_styled_system_recipes0.SpinnerVariantProps>;
+//#endregion
+export { Spinner, type SpinnerProps };

package/dist/components/spinner/index.js

@@ -0,0 +1,9 @@
+import { ark } from "@ark-ui/react/factory";
+import { styled } from "@pyck/styled-system/jsx";
+import { spinner } from "@pyck/styled-system/recipes";
+
+//#region src/components/spinner/spinner.tsx
+const Spinner = styled(ark.span, spinner);
+
+//#endregion
+export { Spinner };

package/dist/components/spotlight/index.d.ts

@@ -0,0 +1,28 @@
+import { UseAsyncListReturn } from "@ark-ui/react/collection";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components/spotlight/types.d.ts
+interface SearchResult {
+  value: string;
+  label: string;
+  domain: string;
+  matchReason?: MatchReason;
+}
+interface MatchReason {
+  /**
+   * TODO: Later we could add 'fuzzy' | 'partial'
+   */
+  property: string;
+  value: string;
+}
+//#endregion
+//#region src/components/spotlight/spotlight.d.ts
+interface SpotlightProps {
+  children?: React.ReactNode;
+  highlightedValue?: string;
+  onHighlightChange?: (value: SearchResult | null) => void;
+  searchList: UseAsyncListReturn<SearchResult, number>;
+}
+declare const Spotlight: (props: SpotlightProps) => react_jsx_runtime0.JSX.Element;
+//#endregion
+export { Spotlight };