@thesage/ui 0.1.0 → 1.0.0

package/dist/dates.mjs

@@ -0,0 +1,193 @@
+"use client";
+
+// src/components/data-display/Calendar.tsx
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import { DayPicker } from "react-day-picker";
+
+// src/lib/utils.ts
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+// src/components/actions/Button.tsx
+import { cva } from "class-variance-authority";
+import { Slot } from "@radix-ui/react-slot";
+import { jsx } from "react/jsx-runtime";
+var buttonVariants = cva(
+  "inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 sage-interactive [&_svg]:transition-transform [&_svg]:duration-300 hover:[&_svg]:translate-x-1",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground shadow",
+        primary: "bg-primary text-primary-foreground shadow",
+        // Alias for default
+        destructive: "bg-destructive text-destructive-foreground shadow-sm",
+        outline: "border border-input bg-transparent shadow-sm hover:bg-primary hover:text-primary-foreground hover:border-primary",
+        secondary: "bg-black/5 dark:bg-white/10 backdrop-blur-md border border-black/5 dark:border-white/10 text-secondary-foreground shadow-sm hover:bg-primary hover:text-primary-foreground dark:hover:bg-primary dark:hover:text-primary-foreground",
+        ghost: "hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline"
+      },
+      size: {
+        default: "h-9 px-4 py-2",
+        sm: "h-8 rounded-md px-3 text-xs",
+        lg: "h-10 rounded-md px-8",
+        icon: "h-9 w-9"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+var Button = ({
+  ref,
+  className,
+  variant,
+  size,
+  asChild = false,
+  children,
+  ...props
+}) => {
+  const Comp = asChild ? Slot : "button";
+  return /* @__PURE__ */ jsx(
+    Comp,
+    {
+      className: cn(buttonVariants({ variant, size, className })),
+      ref,
+      ...props,
+      children: asChild ? children : /* @__PURE__ */ jsx("span", { className: "relative z-20 flex items-center justify-center gap-2", children })
+    }
+  );
+};
+
+// src/components/data-display/Calendar.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+function Calendar({
+  className,
+  classNames,
+  showOutsideDays = true,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx2(
+    DayPicker,
+    {
+      showOutsideDays,
+      className: cn("p-3", className),
+      classNames: {
+        months: "flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0",
+        month: "space-y-4",
+        caption: "flex justify-center pt-1 relative items-center",
+        caption_label: "text-sm font-medium",
+        nav: "space-x-1 flex items-center",
+        nav_button: cn(
+          buttonVariants({ variant: "outline" }),
+          "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100"
+        ),
+        nav_button_previous: "absolute left-1",
+        nav_button_next: "absolute right-1",
+        table: "w-full border-collapse space-y-1",
+        head_row: "flex",
+        head_cell: "text-muted-foreground rounded-md w-9 font-normal text-[0.8rem]",
+        row: "flex w-full mt-2",
+        cell: "h-9 w-9 text-center text-sm p-0 relative [&:has([aria-selected].day-range-end)]:rounded-r-md [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected])]:bg-accent first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20",
+        day: cn(
+          buttonVariants({ variant: "ghost" }),
+          "h-9 w-9 p-0 font-normal aria-selected:opacity-100"
+        ),
+        day_range_end: "day-range-end",
+        day_selected: "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground",
+        day_today: "bg-accent text-accent-foreground",
+        day_outside: "day-outside text-muted-foreground opacity-50 aria-selected:bg-accent/50 aria-selected:text-muted-foreground aria-selected:opacity-30",
+        day_disabled: "text-muted-foreground opacity-50",
+        day_range_middle: "aria-selected:bg-accent aria-selected:text-accent-foreground",
+        day_hidden: "invisible",
+        ...classNames
+      },
+      components: {
+        Chevron: ({ ...props2 }) => {
+          if (props2.orientation === "left") {
+            return /* @__PURE__ */ jsx2(ChevronLeft, { className: "h-4 w-4" });
+          }
+          return /* @__PURE__ */ jsx2(ChevronRight, { className: "h-4 w-4" });
+        }
+      },
+      ...props
+    }
+  );
+}
+Calendar.displayName = "Calendar";
+
+// src/components/layout/DatePicker.tsx
+import { format } from "date-fns";
+import { Calendar as CalendarIcon } from "lucide-react";
+
+// src/components/overlays/Popover.tsx
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var Popover = PopoverPrimitive.Root;
+var PopoverTrigger = PopoverPrimitive.Trigger;
+var PopoverContent = ({
+  ref,
+  className,
+  align = "center",
+  sideOffset = 4,
+  ...props
+}) => /* @__PURE__ */ jsx3(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx3(
+  PopoverPrimitive.Content,
+  {
+    ref,
+    align,
+    sideOffset,
+    className: cn(
+      "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className
+    ),
+    ...props
+  }
+) });
+
+// src/components/layout/DatePicker.tsx
+import { jsx as jsx4, jsxs } from "react/jsx-runtime";
+function DatePicker({
+  date,
+  onDateChange,
+  placeholder = "Pick a date",
+  className,
+  disabled = false
+}) {
+  return /* @__PURE__ */ jsxs(Popover, { children: [
+    /* @__PURE__ */ jsx4(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+      Button,
+      {
+        variant: "outline",
+        className: cn(
+          "w-[280px] justify-start text-left font-normal",
+          !date && "text-muted-foreground",
+          className
+        ),
+        disabled,
+        children: [
+          /* @__PURE__ */ jsx4(CalendarIcon, { className: "mr-2 h-4 w-4" }),
+          date ? format(date, "PPP") : /* @__PURE__ */ jsx4("span", { children: placeholder })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx4(PopoverContent, { className: "w-auto p-0", children: /* @__PURE__ */ jsx4(
+      Calendar,
+      {
+        mode: "single",
+        selected: date,
+        onSelect: onDateChange,
+        initialFocus: true
+      }
+    ) })
+  ] });
+}
+export {
+  Calendar,
+  DatePicker
+};
+//# sourceMappingURL=dates.mjs.map

package/dist/dates.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/Calendar.tsx","../src/lib/utils.ts","../src/components/actions/Button.tsx","../src/components/layout/DatePicker.tsx","../src/components/overlays/Popover.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport { ChevronLeft, ChevronRight } from \"lucide-react\"\nimport { DayPicker } from \"react-day-picker\"\n\nimport { cn } from \"../../lib/utils\"\nimport { buttonVariants } from \"../actions/Button\"\n\nexport type CalendarProps = React.ComponentProps<typeof DayPicker>\n\nfunction Calendar({\n  className,\n  classNames,\n  showOutsideDays = true,\n  ...props\n}: CalendarProps) {\n  return (\n    <DayPicker\n      showOutsideDays={showOutsideDays}\n      className={cn(\"p-3\", className)}\n      classNames={{\n        months: \"flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0\",\n        month: \"space-y-4\",\n        caption: \"flex justify-center pt-1 relative items-center\",\n        caption_label: \"text-sm font-medium\",\n        nav: \"space-x-1 flex items-center\",\n        nav_button: cn(\n          buttonVariants({ variant: \"outline\" }),\n          \"h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100\"\n        ),\n        nav_button_previous: \"absolute left-1\",\n        nav_button_next: \"absolute right-1\",\n        table: \"w-full border-collapse space-y-1\",\n        head_row: \"flex\",\n        head_cell:\n          \"text-muted-foreground rounded-md w-9 font-normal text-[0.8rem]\",\n        row: \"flex w-full mt-2\",\n        cell: \"h-9 w-9 text-center text-sm p-0 relative [&:has([aria-selected].day-range-end)]:rounded-r-md [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected])]:bg-accent first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20\",\n        day: cn(\n          buttonVariants({ variant: \"ghost\" }),\n          \"h-9 w-9 p-0 font-normal aria-selected:opacity-100\"\n        ),\n        day_range_end: \"day-range-end\",\n        day_selected:\n          \"bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground\",\n        day_today: \"bg-accent text-accent-foreground\",\n        day_outside:\n          \"day-outside text-muted-foreground opacity-50 aria-selected:bg-accent/50 aria-selected:text-muted-foreground aria-selected:opacity-30\",\n        day_disabled: \"text-muted-foreground opacity-50\",\n        day_range_middle:\n          \"aria-selected:bg-accent aria-selected:text-accent-foreground\",\n        day_hidden: \"invisible\",\n        ...classNames,\n      }}\n      components={{\n        Chevron: ({ ...props }) => {\n          if (props.orientation === \"left\") {\n            return <ChevronLeft className=\"h-4 w-4\" />\n          }\n          return <ChevronRight className=\"h-4 w-4\" />\n        },\n      }}\n      {...props}\n    />\n  )\n}\nCalendar.displayName = \"Calendar\"\n\nexport { Calendar }\n","import { type ClassValue, clsx } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n    return twMerge(clsx(inputs));\n}\n","import * as React from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { cn } from '../../lib/utils';\nimport { Slot } from '@radix-ui/react-slot';\n\nconst buttonVariants = cva(\n    'inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 sage-interactive [&_svg]:transition-transform [&_svg]:duration-300 hover:[&_svg]:translate-x-1',\n    {\n        variants: {\n            variant: {\n                default: 'bg-primary text-primary-foreground shadow',\n                primary: 'bg-primary text-primary-foreground shadow', // Alias for default\n                destructive: 'bg-destructive text-destructive-foreground shadow-sm',\n                outline: 'border border-input bg-transparent shadow-sm hover:bg-primary hover:text-primary-foreground hover:border-primary',\n                secondary: 'bg-black/5 dark:bg-white/10 backdrop-blur-md border border-black/5 dark:border-white/10 text-secondary-foreground shadow-sm hover:bg-primary hover:text-primary-foreground dark:hover:bg-primary dark:hover:text-primary-foreground',\n                ghost: 'hover:text-accent-foreground',\n                link: 'text-primary underline-offset-4 hover:underline',\n            },\n            size: {\n                default: 'h-9 px-4 py-2',\n                sm: 'h-8 rounded-md px-3 text-xs',\n                lg: 'h-10 rounded-md px-8',\n                icon: 'h-9 w-9',\n            },\n        },\n        defaultVariants: {\n            variant: 'default',\n            size: 'default',\n        },\n    }\n);\n\nexport interface ButtonProps\n    extends React.ButtonHTMLAttributes<HTMLButtonElement>,\n    VariantProps<typeof buttonVariants> {\n    asChild?: boolean;\n}\n\nconst Button = (\n    {\n        ref,\n        className,\n        variant,\n        size,\n        asChild = false,\n        children,\n        ...props\n    }: ButtonProps & {\n        ref?: React.Ref<HTMLButtonElement>;\n    }\n) => {\n    const Comp = asChild ? Slot : \"button\"\n    return (\n        <Comp\n            className={cn(buttonVariants({ variant, size, className }))}\n            ref={ref}\n            {...props}\n        >\n            {asChild ? (\n                children\n            ) : (\n                <span className=\"relative z-20 flex items-center justify-center gap-2\">\n                    {children}\n                </span>\n            )}\n        </Comp>\n    )\n}\n\nexport { Button, buttonVariants };\n","\"use client\"\n\nimport * as React from \"react\"\nimport { format } from \"date-fns\"\nimport { Calendar as CalendarIcon } from \"lucide-react\"\n\nimport { cn } from \"../../lib/utils\"\nimport { Button } from \"../actions/Button\"\nimport { Calendar } from \"../data-display/Calendar\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"../overlays/Popover\"\n\nexport interface DatePickerProps {\n  date?: Date\n  onDateChange?: (date: Date | undefined) => void\n  placeholder?: string\n  className?: string\n  disabled?: boolean\n}\n\nexport function DatePicker({\n  date,\n  onDateChange,\n  placeholder = \"Pick a date\",\n  className,\n  disabled = false,\n}: DatePickerProps) {\n  return (\n    <Popover>\n      <PopoverTrigger asChild>\n        <Button\n          variant=\"outline\"\n          className={cn(\n            \"w-[280px] justify-start text-left font-normal\",\n            !date && \"text-muted-foreground\",\n            className\n          )}\n          disabled={disabled}\n        >\n          <CalendarIcon className=\"mr-2 h-4 w-4\" />\n          {date ? format(date, \"PPP\") : <span>{placeholder}</span>}\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent className=\"w-auto p-0\">\n        <Calendar\n          mode=\"single\"\n          selected={date}\n          onSelect={onDateChange}\n          initialFocus\n        />\n      </PopoverContent>\n    </Popover>\n  )\n}\n","\"use client\";\nimport * as React from \"react\"\nimport * as PopoverPrimitive from \"@radix-ui/react-popover\"\n\nimport { cn } from \"../../lib/utils\"\n\nconst Popover = PopoverPrimitive.Root\n\nconst PopoverTrigger = PopoverPrimitive.Trigger\n\nconst PopoverAnchor = PopoverPrimitive.Anchor\n\nconst PopoverContent = (\n  {\n    ref,\n    className,\n    align = \"center\",\n    sideOffset = 4,\n    ...props\n  }: React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content> & {\n    ref?: React.Ref<React.ElementRef<typeof PopoverPrimitive.Content>>;\n  }\n) => (<PopoverPrimitive.Portal>\n  <PopoverPrimitive.Content\n    ref={ref}\n    align={align}\n    sideOffset={sideOffset}\n    className={cn(\n      \"z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2\",\n      className\n    )}\n    {...props}\n  />\n</PopoverPrimitive.Portal>)\n\nexport { Popover, PopoverTrigger, PopoverContent, PopoverAnchor }\n"],"mappings":"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","names":["jsx","props","jsx","jsx","jsx"]}

package/dist/dnd.d.mts

@@ -0,0 +1,126 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React__default from 'react';
+import { SortingStrategy } from '@dnd-kit/sortable';
+
+/**
+ * Item interface for drag and drop lists
+ */
+interface DragDropItem {
+    id: string;
+    [key: string]: any;
+}
+/**
+ * Props for DragDropList component
+ */
+interface DragDropListProps<T extends DragDropItem> {
+    /**
+     * Array of items to display
+     */
+    items: T[];
+    /**
+     * Callback fired when items are reordered
+     */
+    onReorder: (items: T[]) => void;
+    /**
+     * Render function for each item
+     */
+    renderItem: (item: T, isDragging: boolean) => React__default.ReactNode;
+    /**
+     * Enable drag handle mode (only drag from handle)
+     * @default false
+     */
+    withHandle?: boolean;
+    /**
+     * Custom class name for the list container
+     */
+    className?: string;
+    /**
+     * Custom class name for list items
+     */
+    itemClassName?: string;
+    /**
+     * Sorting strategy for the drag & drop behavior
+     * - verticalListSortingStrategy: For vertical lists (default)
+     * - rectSortingStrategy: For grid layouts
+     * @default verticalListSortingStrategy
+     */
+    strategy?: SortingStrategy;
+}
+/**
+ * Drag handle component for manual drag control
+ * Must be used within a DragDropList with withHandle={true}
+ */
+interface DragDropHandleProps {
+    /**
+     * Custom class name
+     */
+    className?: string;
+    /**
+     * Handle icon
+     */
+    icon?: React__default.ReactNode;
+}
+declare function DragDropHandle({ className, icon }: DragDropHandleProps): react_jsx_runtime.JSX.Element | null;
+/**
+ * DragDropList - Sortable list component with drag and drop functionality
+ *
+ * @example
+ * ```tsx
+ * const [items, setItems] = useState([
+ *   { id: '1', name: 'Item 1' },
+ *   { id: '2', name: 'Item 2' },
+ * ]);
+ *
+ * <DragDropList
+ *   items={items}
+ *   onReorder={setItems}
+ *   renderItem={(item) => (
+ *     <div className="p-4 bg-surface rounded">{item.name}</div>
+ *   )}
+ * />
+ * ```
+ */
+declare function DragDropList<T extends DragDropItem>({ items, onReorder, renderItem, withHandle, className, itemClassName, strategy, }: DragDropListProps<T>): react_jsx_runtime.JSX.Element;
+/**
+ * Props for DragDropTable component
+ */
+interface DragDropTableProps<T extends DragDropItem> {
+    /**
+     * Array of items to display
+     */
+    items: T[];
+    /**
+     * Callback fired when items are reordered
+     */
+    onReorder: (items: T[]) => void;
+    /**
+     * Table columns configuration
+     */
+    columns: {
+        key: string;
+        header: string;
+        render?: (item: T) => React__default.ReactNode;
+    }[];
+    /**
+     * Custom class name for the table
+     */
+    className?: string;
+}
+/**
+ * DragDropTable - Sortable table with draggable rows
+ *
+ * @example
+ * ```tsx
+ * <DragDropTable
+ *   items={data}
+ *   onReorder={setData}
+ *   columns={[
+ *     { key: 'name', header: 'Name' },
+ *     { key: 'email', header: 'Email' },
+ *   ]}
+ * />
+ * ```
+ */
+declare function DragDropTable<T extends DragDropItem>({ items, onReorder, columns, className, }: DragDropTableProps<T>): react_jsx_runtime.JSX.Element;
+
+export { DragDropHandle, type DragDropHandleProps, type DragDropItem, DragDropList, type DragDropListProps, DragDropTable, type DragDropTableProps };

package/dist/dnd.d.ts

@@ -0,0 +1,126 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React__default from 'react';
+import { SortingStrategy } from '@dnd-kit/sortable';
+
+/**
+ * Item interface for drag and drop lists
+ */
+interface DragDropItem {
+    id: string;
+    [key: string]: any;
+}
+/**
+ * Props for DragDropList component
+ */
+interface DragDropListProps<T extends DragDropItem> {
+    /**
+     * Array of items to display
+     */
+    items: T[];
+    /**
+     * Callback fired when items are reordered
+     */
+    onReorder: (items: T[]) => void;
+    /**
+     * Render function for each item
+     */
+    renderItem: (item: T, isDragging: boolean) => React__default.ReactNode;
+    /**
+     * Enable drag handle mode (only drag from handle)
+     * @default false
+     */
+    withHandle?: boolean;
+    /**
+     * Custom class name for the list container
+     */
+    className?: string;
+    /**
+     * Custom class name for list items
+     */
+    itemClassName?: string;
+    /**
+     * Sorting strategy for the drag & drop behavior
+     * - verticalListSortingStrategy: For vertical lists (default)
+     * - rectSortingStrategy: For grid layouts
+     * @default verticalListSortingStrategy
+     */
+    strategy?: SortingStrategy;
+}
+/**
+ * Drag handle component for manual drag control
+ * Must be used within a DragDropList with withHandle={true}
+ */
+interface DragDropHandleProps {
+    /**
+     * Custom class name
+     */
+    className?: string;
+    /**
+     * Handle icon
+     */
+    icon?: React__default.ReactNode;
+}
+declare function DragDropHandle({ className, icon }: DragDropHandleProps): react_jsx_runtime.JSX.Element | null;
+/**
+ * DragDropList - Sortable list component with drag and drop functionality
+ *
+ * @example
+ * ```tsx
+ * const [items, setItems] = useState([
+ *   { id: '1', name: 'Item 1' },
+ *   { id: '2', name: 'Item 2' },
+ * ]);
+ *
+ * <DragDropList
+ *   items={items}
+ *   onReorder={setItems}
+ *   renderItem={(item) => (
+ *     <div className="p-4 bg-surface rounded">{item.name}</div>
+ *   )}
+ * />
+ * ```
+ */
+declare function DragDropList<T extends DragDropItem>({ items, onReorder, renderItem, withHandle, className, itemClassName, strategy, }: DragDropListProps<T>): react_jsx_runtime.JSX.Element;
+/**
+ * Props for DragDropTable component
+ */
+interface DragDropTableProps<T extends DragDropItem> {
+    /**
+     * Array of items to display
+     */
+    items: T[];
+    /**
+     * Callback fired when items are reordered
+     */
+    onReorder: (items: T[]) => void;
+    /**
+     * Table columns configuration
+     */
+    columns: {
+        key: string;
+        header: string;
+        render?: (item: T) => React__default.ReactNode;
+    }[];
+    /**
+     * Custom class name for the table
+     */
+    className?: string;
+}
+/**
+ * DragDropTable - Sortable table with draggable rows
+ *
+ * @example
+ * ```tsx
+ * <DragDropTable
+ *   items={data}
+ *   onReorder={setData}
+ *   columns={[
+ *     { key: 'name', header: 'Name' },
+ *     { key: 'email', header: 'Email' },
+ *   ]}
+ * />
+ * ```
+ */
+declare function DragDropTable<T extends DragDropItem>({ items, onReorder, columns, className, }: DragDropTableProps<T>): react_jsx_runtime.JSX.Element;
+
+export { DragDropHandle, type DragDropHandleProps, type DragDropItem, DragDropList, type DragDropListProps, DragDropTable, type DragDropTableProps };