@pyck/react 0.0.1

package/dist/components/spotlight/index.js

@@ -0,0 +1,165 @@
+import { createListCollection } from "@ark-ui/react/collection";
+import { useEffect, useMemo, useState } from "react";
+import { Box, Center, Grid, HStack } from "@pyck/styled-system/jsx";
+import { ArrowDownIcon, ArrowUpIcon, ChevronRightIcon, CommandIcon, CornerDownLeftIcon, SearchIcon, UserIcon } from "lucide-react";
+import { useDebounce, useHotkey } from "@pyck/react/utils";
+import { Show } from "@pyck/react/show";
+import { Span } from "@pyck/react/span";
+import { Button } from "@pyck/react/button";
+import { Icon } from "@pyck/react/icon";
+import { Combobox } from "@pyck/react/combobox";
+import { Text } from "@pyck/react/text";
+import { ScrollArea } from "@pyck/react/scroll-area";
+import { Dialog } from "@pyck/react/dialog";
+import { InputGroup } from "@pyck/react/input-group";
+import { Kbd } from "@pyck/react/kbd";
+import { Portal } from "@pyck/react/portal";
+import { Breadcrumb } from "@pyck/react/breadcrumb";
+import { Highlight } from "@pyck/react/highlight";
+
+//#region src/components/spotlight/keyboard-hints.tsx
+const KeyboardHints = () => {
+	return <HStack gap="4">
+      <Shortcut label="to navigate">
+        <HStack gap="1.5">
+          <KeyboardKey>
+            <ArrowUpIcon />
+          </KeyboardKey>
+          <KeyboardKey>
+            <ArrowDownIcon />
+          </KeyboardKey>
+        </HStack>
+      </Shortcut>
+
+      <Shortcut label="to select">
+        <KeyboardKey>
+          <CornerDownLeftIcon />
+        </KeyboardKey>
+      </Shortcut>
+
+      <Shortcut label="to close">
+        <Kbd variant="surface" size="2xl" color="fg.muted">
+          Esc
+        </Kbd>
+      </Shortcut>
+    </HStack>;
+};
+const Shortcut = ({ children, label }) => <HStack>
+    {children}
+    <Text color="fg.muted" textStyle="sm" fontWeight="medium">
+      {label}
+    </Text>
+  </HStack>;
+const KeyboardKey = (props) => <Kbd variant="surface" size="2xl">
+    <Icon {...props} />
+  </Kbd>;
+
+//#endregion
+//#region src/components/spotlight/search-result-item.tsx
+const SearchResultItem = (props) => {
+	const { item, filterText } = props;
+	return <HStack py="2.5" px="3.5" borderRadius="l3" _hover={{ bg: "gray.surface.bg.hover" }}>
+      <Center borderWidth="1px" borderRadius="l2" boxSize="10">
+        <Icon>
+          <UserIcon />
+        </Icon>
+      </Center>
+      <Box textStyle="sm">
+        <Text fontWeight="medium">{item.label}</Text>
+        <Breadcrumb.Root size="sm">
+          <Breadcrumb.List gap="0.5">
+            <Breadcrumb.Item>{item.matchReason?.property}</Breadcrumb.Item>
+            <Breadcrumb.Separator>
+              <ChevronRightIcon />
+            </Breadcrumb.Separator>
+            <Breadcrumb.Item color="fg.muted">
+              <Text>
+                <Highlight query={filterText ?? ""} variant="subtle" colorPalette="teal">
+                  {item.matchReason?.value ?? ""}
+                </Highlight>
+              </Text>
+            </Breadcrumb.Item>
+          </Breadcrumb.List>
+        </Breadcrumb.Root>
+      </Box>
+    </HStack>;
+};
+
+//#endregion
+//#region src/components/spotlight/spotlight.tsx
+const Spotlight = (props) => {
+	const { searchList, children, onHighlightChange } = props;
+	const [open, setOpen] = useState(false);
+	useHotkey(setOpen);
+	const [filterText, setFilterText] = useState("");
+	const debouncedValue = useDebounce(filterText, { wait: 250 });
+	useEffect(() => {
+		console.log("Setting filter text to:", debouncedValue);
+		searchList.setFilterText(debouncedValue);
+	}, [debouncedValue]);
+	const collection = useMemo(() => createListCollection({ items: searchList.items }), [searchList.items]);
+	const id = "list";
+	return <Dialog.Root open={open} onOpenChange={(event) => {
+		setOpen(event.open);
+		if (!event.open) {
+			setFilterText("");
+			searchList.setFilterText("");
+		}
+	}} motionPreset="slide-in-bottom" scrollBehavior="inside">
+      <Dialog.Trigger asChild>
+        <Button variant="outline" size="sm" minW="56">
+          <Icon color="fg.muted" size="sm">
+            <SearchIcon />
+          </Icon>
+          <Span fontWeight="normal" flex="1" minW="0" textAlign="start">
+            Find...
+          </Span>
+          <Kbd variant="surface" size="sm" gap="0.5">
+            <Icon boxSize="3">
+              <CommandIcon />
+            </Icon>
+            K
+          </Kbd>
+        </Button>
+      </Dialog.Trigger>
+      <Portal>
+        <Dialog.Backdrop />
+        <Dialog.Positioner>
+          <Combobox.Root open disableLayer inputBehavior="autohighlight" placeholder="Search..." selectionBehavior="preserve" collection={collection} loopFocus={false} onInputValueChange={({ inputValue }) => setFilterText(inputValue || "")} onHighlightChange={(e) => onHighlightChange?.(e.highlightedItem)} variant="plain" ids={{ content: id }}>
+            <Dialog.Content maxW="4xl" divideY="1px">
+              <Dialog.Header px="1" p="2">
+                <InputGroup startElement={<SearchIcon />}>
+                  <Combobox.Input />
+                </InputGroup>
+              </Dialog.Header>
+              <Dialog.Body px="0">
+                <Grid columns={2} gridTemplateColumns="2fr 3fr" width="full" h="xl" divideX="1px">
+                  <ScrollArea size="sm" ids={{ viewport: id }}>
+                    <Combobox.List gap="1" p="2">
+                      <Combobox.Empty>No results found.</Combobox.Empty>
+                      {collection.items.map((item) => <Combobox.Item key={item.value} item={item} persistFocus p="0">
+                          <SearchResultItem item={item} filterText={debouncedValue} />
+                        </Combobox.Item>)}
+                    </Combobox.List>
+                  </ScrollArea>
+                  <ScrollArea size="sm" h="full">
+                    <Box py="4" ps="4" pe="8">
+                      <Show when={children !== null} fallback={<Center>Placeholder to explain how search works</Center>}>
+                        {children}
+                      </Show>
+                    </Box>
+                  </ScrollArea>
+                </Grid>
+              </Dialog.Body>
+              <Dialog.Footer py="3.5" px="4" justifyContent="start">
+                <KeyboardHints />
+              </Dialog.Footer>
+            </Dialog.Content>
+          </Combobox.Root>
+        </Dialog.Positioner>
+      </Portal>
+    </Dialog.Root>;
+};
+
+//#endregion
+export { Spotlight };

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

@@ -0,0 +1,16 @@
+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 * as _ark_ui_react0 from "@ark-ui/react";
+
+//#region src/components/stat/stat.d.ts
+declare namespace stat_d_exports {
+  export { Label, Root, RootProps, ValueText };
+}
+type RootProps = ComponentProps<typeof Root>;
+declare const Root: _pyck_styled_system_jsx0.StyleContextProvider<react.ForwardRefExoticComponent<react.ClassAttributes<HTMLDivElement> & react.HTMLAttributes<HTMLDivElement> & _ark_ui_react0.PolymorphicProps>, _pyck_styled_system_recipes0.StatRecipe>;
+declare const Label: _pyck_styled_system_jsx0.StyleContextConsumer<react.ForwardRefExoticComponent<react.ClassAttributes<HTMLDivElement> & react.HTMLAttributes<HTMLDivElement> & _ark_ui_react0.PolymorphicProps>>;
+declare const ValueText: _pyck_styled_system_jsx0.StyleContextConsumer<react.ForwardRefExoticComponent<react.ClassAttributes<HTMLDivElement> & react.HTMLAttributes<HTMLDivElement> & _ark_ui_react0.PolymorphicProps>>;
+//#endregion
+export { stat_d_exports as Stat };

package/dist/components/stat/index.js

@@ -0,0 +1,18 @@
+import { t as __exportAll } from "../../chunk-BYypO7fO.js";
+import { ark } from "@ark-ui/react/factory";
+import { createStyleContext } from "@pyck/styled-system/jsx";
+import { stat } from "@pyck/styled-system/recipes";
+
+//#region src/components/stat/stat.tsx
+var stat_exports = /* @__PURE__ */ __exportAll({
+	Label: () => Label,
+	Root: () => Root,
+	ValueText: () => ValueText
+});
+const { withProvider, withContext } = createStyleContext(stat);
+const Root = withProvider(ark.div, "root");
+const Label = withContext(ark.div, "label");
+const ValueText = withContext(ark.div, "valueText");
+
+//#endregion
+export { stat_exports as Stat };

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

@@ -0,0 +1,36 @@
+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 { StepChangeDetails, Steps } from "@ark-ui/react/steps";
+
+//#region src/components/steps/steps.d.ts
+declare namespace steps_d_exports {
+  export { CompletedContent, Content, Context, Description, Indicator, Item, ItemContext, List, NextTrigger, PrevTrigger, Progress, Root, RootProps, RootProvider, Separator, StepChangeDetails, Title, Trigger };
+}
+type RootProps = ComponentProps<typeof Root>;
+declare const Root: _pyck_styled_system_jsx0.StyleContextProvider<react.ForwardRefExoticComponent<Steps.RootProps & react.RefAttributes<HTMLDivElement>>, _pyck_styled_system_recipes0.StepsRecipe>;
+declare const RootProvider: _pyck_styled_system_jsx0.StyleContextProvider<react.ForwardRefExoticComponent<Steps.RootProviderProps & react.RefAttributes<HTMLDivElement>>, _pyck_styled_system_recipes0.StepsRecipe>;
+declare const CompletedContent: _pyck_styled_system_jsx0.StyleContextConsumer<react.ForwardRefExoticComponent<Steps.CompletedContentProps & react.RefAttributes<HTMLDivElement>>>;
+declare const Content: _pyck_styled_system_jsx0.StyleContextConsumer<react.ForwardRefExoticComponent<Steps.ContentProps & react.RefAttributes<HTMLDivElement>>>;
+declare const Item: _pyck_styled_system_jsx0.StyleContextConsumer<react.ForwardRefExoticComponent<Steps.ItemProps & react.RefAttributes<HTMLDivElement>>>;
+declare const List: _pyck_styled_system_jsx0.StyleContextConsumer<react.ForwardRefExoticComponent<Steps.ListProps & react.RefAttributes<HTMLDivElement>>>;
+declare const NextTrigger: _pyck_styled_system_jsx0.StyleContextConsumer<react.ForwardRefExoticComponent<Steps.NextTriggerProps & react.RefAttributes<HTMLButtonElement>>>;
+declare const PrevTrigger: _pyck_styled_system_jsx0.StyleContextConsumer<react.ForwardRefExoticComponent<Steps.PrevTriggerProps & react.RefAttributes<HTMLButtonElement>>>;
+declare const Progress: _pyck_styled_system_jsx0.StyleContextConsumer<react.ForwardRefExoticComponent<Steps.ProgressProps & react.RefAttributes<HTMLDivElement>>>;
+declare const Separator: _pyck_styled_system_jsx0.StyleContextConsumer<react.ForwardRefExoticComponent<Steps.SeparatorProps & react.RefAttributes<HTMLDivElement>>>;
+declare const Trigger: _pyck_styled_system_jsx0.StyleContextConsumer<react.ForwardRefExoticComponent<Steps.TriggerProps & react.RefAttributes<HTMLButtonElement>>>;
+declare const Title: _pyck_styled_system_jsx0.StyleContextConsumer<react.ForwardRefExoticComponent<react.ClassAttributes<HTMLDivElement> & react.HTMLAttributes<HTMLDivElement> & _ark_ui_react0.PolymorphicProps>>;
+declare const Description: _pyck_styled_system_jsx0.StyleContextConsumer<react.ForwardRefExoticComponent<react.ClassAttributes<HTMLDivElement> & react.HTMLAttributes<HTMLDivElement> & _ark_ui_react0.PolymorphicProps>>;
+declare const Indicator: _pyck_styled_system_jsx0.StyleContextConsumer<react.ForwardRefExoticComponent<Steps.IndicatorProps & react.RefAttributes<HTMLDivElement>>>;
+declare const Context: {
+  (props: Steps.ContextProps): ReactNode;
+  displayName: string;
+};
+declare const ItemContext: {
+  (props: Steps.ItemContextProps): ReactNode;
+  displayName: string;
+};
+//#endregion
+export { steps_d_exports as Steps };

package/dist/components/steps/index.js

@@ -0,0 +1,61 @@
+import { t as __exportAll } from "../../chunk-BYypO7fO.js";
+import { forwardRef } from "react";
+import { ark } from "@ark-ui/react/factory";
+import { Box, createStyleContext } from "@pyck/styled-system/jsx";
+import { steps } from "@pyck/styled-system/recipes";
+import { CheckIcon } from "lucide-react";
+import { Steps } from "@ark-ui/react/steps";
+
+//#region src/components/steps/steps.tsx
+var steps_exports = /* @__PURE__ */ __exportAll({
+	CompletedContent: () => CompletedContent,
+	Content: () => Content,
+	Context: () => Context,
+	Description: () => Description,
+	Indicator: () => Indicator,
+	Item: () => Item,
+	ItemContext: () => ItemContext,
+	List: () => List,
+	NextTrigger: () => NextTrigger,
+	PrevTrigger: () => PrevTrigger,
+	Progress: () => Progress,
+	Root: () => Root,
+	RootProvider: () => RootProvider,
+	Separator: () => Separator,
+	Title: () => Title,
+	Trigger: () => Trigger
+});
+const { withProvider, withContext } = createStyleContext(steps);
+const Root = withProvider(Steps.Root, "root", { forwardProps: ["orientation"] });
+const RootProvider = withProvider(Steps.RootProvider, "root");
+const CompletedContent = withContext(Steps.CompletedContent, "content");
+const Content = withContext(Steps.Content, "content");
+const Item = withContext(Steps.Item, "item", { defaultProps: { role: "tab" } });
+const List = withContext(Steps.List, "list");
+const NextTrigger = withContext(Steps.NextTrigger, "trigger");
+const PrevTrigger = withContext(Steps.PrevTrigger, "trigger");
+const Progress = withContext(Steps.Progress, "progress");
+const Separator = withContext(Steps.Separator, "separator");
+const Trigger = withContext(Steps.Trigger, "trigger");
+const Title = withContext(ark.div, "title");
+const Description = withContext(ark.div, "description");
+const Status = (props) => <Steps.ItemContext>
+    {(api) => {
+	if (api.current) return <>{props.current ?? props.incomplete}</>;
+	if (api.completed) return <>{props.complete}</>;
+	return <>{props.incomplete ?? props.current}</>;
+}}
+  </Steps.ItemContext>;
+const StepNumber = forwardRef(function StepNumber(props, ref) {
+	return <Steps.ItemContext>
+        {(api) => <Box ref={ref} {...props}>
+            {api.index + 1}
+          </Box>}
+      </Steps.ItemContext>;
+});
+const Indicator = withContext(Steps.Indicator, "indicator", { defaultProps: { children: <Status complete={<CheckIcon />} incomplete={<StepNumber />} /> } });
+const Context = Steps.Context;
+const ItemContext = Steps.ItemContext;
+
+//#endregion
+export { steps_exports as Steps };

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

@@ -0,0 +1,41 @@
+import * as react from "react";
+import { ComponentProps, ReactNode, RefObject } 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 { FieldProps } from "@pyck/react/field";
+import { FieldPath, FieldValues } from "react-hook-form";
+import "@ark-ui/react";
+import { Switch as Switch$1 } from "@ark-ui/react/switch";
+import "@pyck/styled-system/types";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components/switch/switch.d.ts
+type RootProps = ComponentProps<typeof Root>;
+type HiddenInputProps = ComponentProps<typeof HiddenInput>;
+declare const Root: _pyck_styled_system_jsx0.StyleContextProvider<react.ForwardRefExoticComponent<Switch$1.RootProps & react.RefAttributes<HTMLLabelElement>>, _pyck_styled_system_recipes0.SwitchRecipeRecipe>;
+declare const HiddenInput: react.ForwardRefExoticComponent<Switch$1.HiddenInputProps & react.RefAttributes<HTMLInputElement>>;
+//#endregion
+//#region src/components/switch/switch.closed.d.ts
+interface SwitchProps extends RootProps {
+  inputProps?: HiddenInputProps;
+  rootRef?: RefObject<HTMLLabelElement | null>;
+  trackLabel?: {
+    on: ReactNode;
+    off: ReactNode;
+  };
+  thumbLabel?: {
+    on: ReactNode;
+    off: ReactNode;
+  };
+}
+declare const Switch: react.ForwardRefExoticComponent<Omit<SwitchProps, "ref"> & react.RefAttributes<HTMLInputElement>>;
+//#endregion
+//#region src/components/switch/switch.field.d.ts
+interface SwitchFieldProps<T extends FieldValues = FieldValues> extends Omit<SwitchProps, 'label'> {
+  name: FieldPath<T>;
+  label: FieldProps['label'] | undefined;
+  helperText?: FieldProps['helperText'];
+}
+declare const SwitchField: <T extends FieldValues>(props: SwitchFieldProps<T>) => react_jsx_runtime0.JSX.Element;
+//#endregion
+export { Switch, SwitchField, type SwitchFieldProps, type SwitchProps };

package/dist/components/switch/index.js

@@ -0,0 +1,80 @@
+import { t as __exportAll } from "../../chunk-BYypO7fO.js";
+import { forwardRef } from "react";
+import { VisuallyHidden, createStyleContext, styled } from "@pyck/styled-system/jsx";
+import { switchRecipe } from "@pyck/styled-system/recipes";
+import { Field } from "@pyck/react/field";
+import { Controller, useFormContext } from "react-hook-form";
+import { ark } from "@ark-ui/react";
+import { Switch as Switch$1, SwitchContext as Context, useSwitchContext } from "@ark-ui/react/switch";
+
+//#region src/components/switch/switch.tsx
+var switch_exports = /* @__PURE__ */ __exportAll({
+	Context: () => Context,
+	Control: () => Control,
+	HiddenInput: () => HiddenInput,
+	Indicator: () => Indicator,
+	Label: () => Label,
+	Root: () => Root,
+	RootProvider: () => RootProvider,
+	Thumb: () => Thumb,
+	ThumbIndicator: () => ThumbIndicator
+});
+const { withProvider, withContext } = createStyleContext(switchRecipe);
+const Root = withProvider(Switch$1.Root, "root");
+const RootProvider = withProvider(Switch$1.RootProvider, "root");
+const Label = withContext(Switch$1.Label, "label");
+const Thumb = withContext(Switch$1.Thumb, "thumb");
+const HiddenInput = Switch$1.HiddenInput;
+const Control = withContext(Switch$1.Control, "control", { defaultProps: { children: <Thumb /> } });
+const StyledIndicator = withContext(ark.span, "indicator");
+const Indicator = forwardRef(function Indicator(props, ref) {
+	const { fallback, children, ...rest } = props;
+	const api = useSwitchContext();
+	return <StyledIndicator ref={ref} data-checked={api.checked ? "" : void 0} {...rest}>
+        {api.checked ? children : fallback}
+      </StyledIndicator>;
+});
+const StyledThumbIndicator = styled(ark.span);
+const ThumbIndicator = forwardRef(function SwitchThumbIndicator(props, ref) {
+	const { fallback, children, ...rest } = props;
+	const api = useSwitchContext();
+	return <StyledThumbIndicator ref={ref} data-checked={api.checked ? "" : void 0} {...rest}>
+        {api.checked ? children : fallback}
+      </StyledThumbIndicator>;
+});
+
+//#endregion
+//#region src/components/switch/switch.closed.tsx
+const Switch = forwardRef(function Switch(props, ref) {
+	const { inputProps, children, rootRef = null, trackLabel, thumbLabel, ...rest } = props;
+	return <switch_exports.Root ref={rootRef} {...rest}>
+      <switch_exports.HiddenInput ref={ref} {...inputProps} />
+      <switch_exports.Control>
+        <switch_exports.Thumb>
+          {thumbLabel && <switch_exports.ThumbIndicator fallback={thumbLabel?.off}>
+              {thumbLabel?.on}
+            </switch_exports.ThumbIndicator>}
+        </switch_exports.Thumb>
+        {trackLabel && <switch_exports.Indicator fallback={trackLabel.off}>{trackLabel.on}</switch_exports.Indicator>}
+      </switch_exports.Control>
+      {children && <switch_exports.Label>{children}</switch_exports.Label>}
+      {props["aria-label"] && <switch_exports.Label asChild>
+          <VisuallyHidden>{props["aria-label"]}</VisuallyHidden>
+        </switch_exports.Label>}
+    </switch_exports.Root>;
+});
+
+//#endregion
+//#region src/components/switch/switch.field.tsx
+const SwitchField = (props) => {
+	const { name, label, helperText, disabled } = props;
+	const { control } = useFormContext();
+	return <Controller name={name} control={control} render={({ field, fieldState }) => <Field helperText={helperText} disabled={field.disabled || disabled} invalid={!!fieldState.error} errorText={fieldState.error?.message}>
+          <Switch name={field.name} checked={field.value} onCheckedChange={({ checked }) => field.onChange(checked)} inputProps={{ onBlur: field.onBlur }}>
+            {label}
+          </Switch>
+        </Field>} />;
+};
+
+//#endregion
+export { Switch, SwitchField };

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

@@ -0,0 +1,85 @@
+import * as react from "react";
+import { ComponentProps, ComponentType, 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 { DateInput, Locale } from "@pyck/react/utils";
+import * as _ark_ui_react0 from "@ark-ui/react";
+import { DisplayValueProps } from "@pyck/react/display-value";
+import { DateFormatType } from "@pyck/react/display-date-value";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components/table/cells/table-cell-content.d.ts
+interface TableCellContentProps<IconProps extends object = object> {
+  children: ReactNode;
+  icon?: ReactNode | ComponentType<IconProps>;
+  iconProps?: IconProps;
+  tooltip?: ReactNode;
+  justifyContent?: 'flex-start' | 'flex-end' | 'space-between';
+}
+type TableCellContentShellProps = Pick<TableCellContentProps, 'icon' | 'tooltip' | 'justifyContent'>;
+//#endregion
+//#region src/components/table/cells/boolean-cell.d.ts
+interface BooleanCellProps extends TableCellContentShellProps {
+  value?: boolean | null | undefined;
+  trueLabel?: string;
+  falseLabel?: string;
+  copyable?: DisplayValueProps<boolean>['copyable'];
+}
+declare const BooleanCell: (props: BooleanCellProps) => react_jsx_runtime0.JSX.Element;
+//#endregion
+//#region src/components/table/cells/date-cell.d.ts
+interface DateCellProps extends TableCellContentShellProps {
+  value?: DateInput | null | undefined;
+  type?: 'date' | 'datetime' | 'relative';
+  format?: DateFormatType;
+  locale?: Locale;
+  copyable?: boolean;
+}
+declare const DateCell: (props: DateCellProps) => react_jsx_runtime0.JSX.Element;
+//#endregion
+//#region src/components/table/cells/number-cell.d.ts
+interface NumberCellProps extends TableCellContentShellProps {
+  value?: number | null | undefined;
+  locale?: Locale;
+  minimumFractionDigits?: number;
+  maximumFractionDigits?: number;
+  useGrouping?: boolean;
+  copyable?: DisplayValueProps<number>['copyable'];
+}
+declare const NumberCell: (props: NumberCellProps) => react_jsx_runtime0.JSX.Element;
+//#endregion
+//#region src/components/table/cells/text-cell.d.ts
+interface TextCellProps<T> extends TableCellContentShellProps {
+  value?: T | null | undefined;
+  formatValue?: DisplayValueProps<T>['formatValue'];
+  copyable?: DisplayValueProps<T>['copyable'];
+}
+declare const TextCell: <T>(props: TextCellProps<T>) => react_jsx_runtime0.JSX.Element;
+declare namespace table_d_exports {
+  export { Body, Caption, Cell, Foot, Head, Header, Root, RootProps, Row };
+}
+type RootProps = ComponentProps<typeof Root>;
+declare const Root: _pyck_styled_system_jsx0.StyleContextProvider<react.ForwardRefExoticComponent<react.ClassAttributes<HTMLTableElement> & react.TableHTMLAttributes<HTMLTableElement> & _ark_ui_react0.PolymorphicProps>, _pyck_styled_system_recipes0.TableRecipe>;
+declare const Body: _pyck_styled_system_jsx0.StyleContextConsumer<react.ForwardRefExoticComponent<react.ClassAttributes<HTMLTableSectionElement> & react.HTMLAttributes<HTMLTableSectionElement> & _ark_ui_react0.PolymorphicProps>>;
+declare const Cell: _pyck_styled_system_jsx0.StyleContextConsumer<react.ForwardRefExoticComponent<react.ClassAttributes<HTMLTableDataCellElement> & react.TdHTMLAttributes<HTMLTableDataCellElement> & _ark_ui_react0.PolymorphicProps>>;
+declare const Caption: _pyck_styled_system_jsx0.StyleContextConsumer<react.ForwardRefExoticComponent<react.ClassAttributes<HTMLElement> & react.HTMLAttributes<HTMLElement> & _ark_ui_react0.PolymorphicProps>>;
+declare const Foot: _pyck_styled_system_jsx0.StyleContextConsumer<react.ForwardRefExoticComponent<react.ClassAttributes<HTMLTableSectionElement> & react.HTMLAttributes<HTMLTableSectionElement> & _ark_ui_react0.PolymorphicProps>>;
+declare const Head: _pyck_styled_system_jsx0.StyleContextConsumer<react.ForwardRefExoticComponent<react.ClassAttributes<HTMLTableSectionElement> & react.HTMLAttributes<HTMLTableSectionElement> & _ark_ui_react0.PolymorphicProps>>;
+declare const Header: _pyck_styled_system_jsx0.StyleContextConsumer<react.ForwardRefExoticComponent<react.ClassAttributes<HTMLTableHeaderCellElement> & react.ThHTMLAttributes<HTMLTableHeaderCellElement> & _ark_ui_react0.PolymorphicProps>>;
+declare const Row: _pyck_styled_system_jsx0.StyleContextConsumer<react.ForwardRefExoticComponent<react.ClassAttributes<HTMLTableRowElement> & react.HTMLAttributes<HTMLTableRowElement> & _ark_ui_react0.PolymorphicProps>>;
+//#endregion
+//#region src/components/table/use-virtualized-table-height.d.ts
+interface UseVirtualizedTableHeightOptions {
+  virtualSize: number;
+  tableRef: React.RefObject<HTMLTableElement | null>;
+  scrollRef: React.RefObject<HTMLDivElement | null>;
+}
+declare const useVirtualizedTableHeight: ({
+  virtualSize,
+  tableRef,
+  scrollRef
+}: UseVirtualizedTableHeightOptions) => {
+  isScrollNearBottom: boolean;
+};
+//#endregion
+export { BooleanCell, type BooleanCellProps, DateCell, type DateCellProps, NumberCell, type NumberCellProps, table_d_exports as Table, type TableCellContentShellProps, TextCell, type TextCellProps, type UseVirtualizedTableHeightOptions, useVirtualizedTableHeight };

package/dist/components/table/index.js

@@ -0,0 +1,144 @@
+import { t as __exportAll } from "../../chunk-BYypO7fO.js";
+import { match } from "ts-pattern";
+import { useCallback, useEffect, useState } from "react";
+import { ark } from "@ark-ui/react/factory";
+import { Box, HStack, createStyleContext } from "@pyck/styled-system/jsx";
+import { table } from "@pyck/styled-system/recipes";
+import { Show } from "@pyck/react/show";
+import { Wrap } from "@pyck/react/wrap";
+import { Icon } from "@pyck/react/icon";
+import { DisplayValue } from "@pyck/react/display-value";
+import { Tooltip } from "@pyck/react/tooltip";
+import { DisplayDateValue } from "@pyck/react/display-date-value";
+
+//#region src/components/table/cells/table-cell-content.tsx
+const renderIcon = (icon, iconProps) => match(icon).when((x) => typeof x === "function", (Icon) => <Icon {...iconProps} />).otherwise((node) => node ?? null);
+const TableCellContent = (props) => {
+	const { children, icon, iconProps, tooltip, justifyContent = "flex-start", ...rest } = props;
+	const content = <HStack justifyContent={justifyContent} {...rest}>
+      <Wrap when={!!icon} with={(children) => <Icon boxSize="4">{children}</Icon>}>
+        {renderIcon(icon, iconProps)}
+      </Wrap>
+
+      <Box overflow="hidden" textOverflow="ellipsis">
+        {children}
+      </Box>
+    </HStack>;
+	return <Show when={!!tooltip} fallback={content}>
+      <Tooltip content={tooltip} openDelay={100}>
+        {content}
+      </Tooltip>
+    </Show>;
+};
+
+//#endregion
+//#region src/components/table/cells/boolean-cell.tsx
+const BooleanCell = (props) => {
+	const { value: booleanValue, trueLabel = "Yes", falseLabel = "No", copyable, icon, tooltip, ...rest } = props;
+	const value = booleanValue ? trueLabel : falseLabel;
+	return <TableCellContent tooltip={tooltip} icon={icon} {...rest}>
+      <DisplayValue value={value} copyable={copyable} />
+    </TableCellContent>;
+};
+
+//#endregion
+//#region src/components/table/cells/date-cell.tsx
+const DateCell = (props) => {
+	const { value, type = "date", format, locale, copyable, icon, tooltip, justifyContent, ...rest } = props;
+	return <TableCellContent icon={icon} tooltip={tooltip} justifyContent={justifyContent} {...rest}>
+      <DisplayDateValue value={value} type={type} format={format} locale={locale} copyable={copyable} />
+    </TableCellContent>;
+};
+
+//#endregion
+//#region src/components/table/cells/number-cell.tsx
+const NumberCell = (props) => {
+	const { value, minimumFractionDigits, maximumFractionDigits, locale: localeProp, useGrouping, copyable, tooltip, icon, ...rest } = props;
+	const locale = localeProp ?? "en";
+	const formatValue = (n) => {
+		if (!Number.isFinite(n)) return null;
+		return new Intl.NumberFormat(locale, {
+			useGrouping,
+			minimumFractionDigits,
+			maximumFractionDigits
+		}).format(n);
+	};
+	return <TableCellContent icon={icon} tooltip={tooltip} justifyContent="flex-end" {...rest}>
+      <DisplayValue value={value} formatValue={formatValue} copyable={copyable} />
+    </TableCellContent>;
+};
+
+//#endregion
+//#region src/components/table/cells/text-cell.tsx
+const TextCell = (props) => {
+	const { value, formatValue, copyable, icon, tooltip, justifyContent = "flex-start", ...rest } = props;
+	return <TableCellContent icon={icon} tooltip={tooltip} justifyContent={justifyContent} {...rest}>
+      <DisplayValue value={value} formatValue={formatValue} copyable={copyable} />
+    </TableCellContent>;
+};
+
+//#endregion
+//#region src/components/table/table.tsx
+var table_exports = /* @__PURE__ */ __exportAll({
+	Body: () => Body,
+	Caption: () => Caption,
+	Cell: () => Cell,
+	Foot: () => Foot,
+	Head: () => Head,
+	Header: () => Header,
+	Root: () => Root,
+	Row: () => Row
+});
+const { withProvider, withContext } = createStyleContext(table);
+const Root = withProvider(ark.table, "root");
+const Body = withContext(ark.tbody, "body");
+const Cell = withContext(ark.td, "cell");
+const Caption = withContext(ark.caption, "caption");
+const Foot = withContext(ark.tfoot, "foot");
+const Head = withContext(ark.thead, "head");
+const Header = withContext(ark.th, "header");
+const Row = withContext(ark.tr, "row");
+
+//#endregion
+//#region src/components/table/use-virtualized-table-height.ts
+const SCROLL_THRESHOLD = .95;
+const useVirtualizedTableHeight = ({ virtualSize, tableRef, scrollRef }) => {
+	const [isScrollNearBottom, setIsScrollNearBottom] = useState(false);
+	const handlePseudoResize = useCallback(() => {
+		return adjustTableHeight(tableRef, virtualSize);
+	}, [tableRef, virtualSize]);
+	const handleScroll = useCallback(() => {
+		if (scrollRef.current) {
+			const scrollPosition = scrollRef.current.scrollTop;
+			const visibleHeight = scrollRef.current.clientHeight;
+			setIsScrollNearBottom(scrollPosition > virtualSize * SCROLL_THRESHOLD - visibleHeight);
+		}
+	}, [scrollRef, virtualSize]);
+	useEffect(() => {
+		const scrollable = scrollRef.current;
+		if (scrollable) scrollable.addEventListener("scroll", handleScroll);
+		handlePseudoResize();
+		return () => {
+			if (scrollable) scrollable.removeEventListener("scroll", handleScroll);
+		};
+	}, [
+		scrollRef,
+		handleScroll,
+		handlePseudoResize
+	]);
+	useEffect(() => {
+		if (isScrollNearBottom) handlePseudoResize();
+	}, [isScrollNearBottom, handlePseudoResize]);
+	return { isScrollNearBottom };
+};
+const adjustTableHeight = (tableRef, virtualHeight) => {
+	if (!tableRef.current) return;
+	const existingPseudoElement = window.getComputedStyle(tableRef.current, "::after");
+	const existingPseudoHeight = parseFloat(existingPseudoElement.height) || 0;
+	const tableHeight = tableRef.current.clientHeight - existingPseudoHeight;
+	const pseudoHeight = Math.max(virtualHeight - tableHeight, 0);
+	tableRef.current.style.setProperty("--pseudo-height", `${pseudoHeight}px`);
+};
+
+//#endregion
+export { BooleanCell, DateCell, NumberCell, table_exports as Table, TextCell, useVirtualizedTableHeight };