fromsrc 0.0.0 → 0.0.2

package/dist/components/sidebarfilter.js

@@ -0,0 +1,50 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useRef, useCallback } from 'react';
+
+const matches = (text, q) => text.toLowerCase().includes(q.toLowerCase());
+const foldermatches = (f, q) => matches(f.title, q) || f.items.some((i) => i.type === "folder" ? foldermatches(i, q) : matches(i.title, q));
+function filternavigation(nav, q) {
+  if (!q) return nav;
+  return nav.map((s) => ({
+    ...s,
+    items: s.items.filter((i) => {
+      if (!("type" in i)) return matches(i.title, q);
+      return i.type === "folder" ? foldermatches(i, q) : matches(i.title, q);
+    })
+  })).filter((s) => s.items.length > 0);
+}
+function SidebarFilter({ value, onChange }) {
+  const ref = useRef(null);
+  const handle = useCallback((e) => onChange(e.target.value), [onChange]);
+  const clear = useCallback(() => {
+    onChange("");
+    ref.current?.focus();
+  }, [onChange]);
+  return /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        ref,
+        type: "text",
+        value,
+        onChange: handle,
+        "aria-label": "filter navigation",
+        placeholder: "filter...",
+        className: "w-full h-8 px-2.5 pr-7 rounded-md border border-line bg-surface/50 text-sm text-fg placeholder:text-muted outline-none transition-colors focus:border-accent"
+      }
+    ),
+    value && /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: clear,
+        "aria-label": "clear filter",
+        className: "absolute right-1.5 top-1/2 -translate-y-1/2 w-5 h-5 flex items-center justify-center text-muted hover:text-fg transition-colors",
+        children: /* @__PURE__ */ jsx("svg", { className: "w-3 h-3", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M18 6L6 18M6 6l12 12" }) })
+      }
+    )
+  ] });
+}
+
+export { SidebarFilter, filternavigation };

package/dist/components/skeleton.d.ts

@@ -0,0 +1,40 @@
+import * as react from 'react';
+
+/**
+ * Props for the Skeleton component
+ */
+interface SkeletonProps {
+    /** Width of the skeleton (px if number, raw value if string) */
+    width?: string | number;
+    /** Height of the skeleton (px if number, raw value if string) */
+    height?: string | number;
+    /** Border radius - true for default, false for none, string for tailwind size */
+    rounded?: boolean | string;
+    /** Additional CSS classes */
+    className?: string;
+    /** Accessible label for screen readers */
+    label?: string;
+}
+declare const Skeleton: react.NamedExoticComponent<SkeletonProps>;
+/**
+ * Props for the SkeletonText component
+ */
+interface SkeletonTextProps {
+    /** Number of text lines to display */
+    lines?: number;
+    /** Whether this is a standalone loading indicator */
+    standalone?: boolean;
+    /** Accessible label for screen readers */
+    label?: string;
+}
+declare const SkeletonText: react.NamedExoticComponent<SkeletonTextProps>;
+/**
+ * Props for the SkeletonCard component
+ */
+interface SkeletonCardProps {
+    /** Accessible label for screen readers */
+    label?: string;
+}
+declare const SkeletonCard: react.NamedExoticComponent<SkeletonCardProps>;
+
+export { Skeleton, SkeletonCard, type SkeletonCardProps, type SkeletonProps, SkeletonText, type SkeletonTextProps };

package/dist/components/skeleton.js

@@ -0,0 +1,59 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { memo } from 'react';
+
+const Skeleton = memo(function Skeleton2({
+  width,
+  height = "1rem",
+  rounded = "md",
+  className = "",
+  label = "Loading"
+}) {
+  const radiusClass = rounded === true ? "rounded" : rounded === false ? "" : `rounded-${rounded}`;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: `animate-pulse bg-surface ${radiusClass} ${className}`,
+      style: {
+        width: typeof width === "number" ? `${width}px` : width,
+        height: typeof height === "number" ? `${height}px` : height,
+        willChange: "opacity"
+      },
+      role: "status",
+      "aria-busy": "true",
+      "aria-label": label
+    }
+  );
+});
+const SkeletonText = memo(function SkeletonText2({
+  lines = 3,
+  standalone = true,
+  label = "Loading"
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "space-y-2",
+      ...standalone && { role: "status", "aria-busy": true, "aria-label": label },
+      children: Array.from({ length: lines }, (_, i) => /* @__PURE__ */ jsx(Skeleton, { width: i === lines - 1 ? "75%" : "100%", height: "0.875rem", label: "" }, i))
+    }
+  );
+});
+const SkeletonCard = memo(function SkeletonCard2({
+  label = "Loading"
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "space-y-3 rounded-lg border border-line p-4",
+      role: "status",
+      "aria-busy": "true",
+      "aria-label": label,
+      children: [
+        /* @__PURE__ */ jsx(Skeleton, { width: "60%", height: "1.25rem", label: "" }),
+        /* @__PURE__ */ jsx(SkeletonText, { lines: 2, standalone: false })
+      ]
+    }
+  );
+});
+
+export { Skeleton, SkeletonCard, SkeletonText };

package/dist/components/skiplink.d.ts

@@ -0,0 +1,12 @@
+import * as react from 'react';
+import { JSX } from 'react';
+
+interface SkipLinkProps {
+    href?: string;
+    label?: string;
+    className?: string;
+}
+declare function SkipLinkBase({ href, label, className, }: SkipLinkProps): JSX.Element;
+declare const SkipLink: react.MemoExoticComponent<typeof SkipLinkBase>;
+
+export { SkipLink, type SkipLinkProps };

package/dist/components/skiplink.js

@@ -0,0 +1,21 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { memo } from 'react';
+
+function SkipLinkBase({
+  href = "#content",
+  label = "Skip to content",
+  className
+}) {
+  return /* @__PURE__ */ jsx(
+    "a",
+    {
+      href,
+      className: `sr-only focus:not-sr-only fixed top-4 left-4 z-50 bg-bg text-fg px-4 py-2 border border-line rounded-md ${className || ""}`,
+      children: label
+    }
+  );
+}
+const SkipLink = memo(SkipLinkBase);
+
+export { SkipLink };

package/dist/components/spinner.d.ts

@@ -0,0 +1,34 @@
+import * as react from 'react';
+
+/**
+ * Props for the Spinner component.
+ * @property size - Spinner dimensions (sm, md, lg)
+ * @property className - Additional CSS classes
+ * @property aria-hidden - Hide from screen readers when used decoratively
+ */
+interface SpinnerProps {
+    size?: "sm" | "md" | "lg";
+    className?: string;
+    "aria-hidden"?: boolean | "true" | "false";
+}
+/**
+ * Animated spinner indicating loading state.
+ * @example <Spinner size="sm" />
+ */
+declare const Spinner: react.NamedExoticComponent<SpinnerProps>;
+/**
+ * Props for the Loading component.
+ * @property text - Loading message to display
+ * @property size - Spinner size (sm, md, lg)
+ */
+interface LoadingProps {
+    text?: string;
+    size?: "sm" | "md" | "lg";
+}
+/**
+ * Loading indicator with optional text message.
+ * @example <Loading text="Fetching data..." />
+ */
+declare const Loading: react.NamedExoticComponent<LoadingProps>;
+
+export { Loading, type LoadingProps, Spinner, type SpinnerProps };

package/dist/components/spinner.js

@@ -0,0 +1,56 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { memo } from 'react';
+
+const sizes = {
+  sm: "size-4",
+  md: "size-6",
+  lg: "size-8"
+};
+const Spinner = memo(function Spinner2({
+  size = "md",
+  className = "",
+  "aria-hidden": ariaHidden
+}) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      className: `animate-spin will-change-transform ${sizes[size]} ${className}`,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      role: "status",
+      "aria-label": ariaHidden ? void 0 : "Loading",
+      "aria-hidden": ariaHidden,
+      children: [
+        /* @__PURE__ */ jsx("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            className: "opacity-75",
+            fill: "currentColor",
+            d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+          }
+        )
+      ]
+    }
+  );
+});
+const Loading = memo(function Loading2({
+  text,
+  size = "md"
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: "status",
+      "aria-live": "polite",
+      "aria-label": text || "Loading",
+      className: "flex items-center justify-center gap-2 text-muted",
+      children: [
+        /* @__PURE__ */ jsx(Spinner, { size, "aria-hidden": "true" }),
+        text && /* @__PURE__ */ jsx("span", { className: "text-sm", children: text })
+      ]
+    }
+  );
+});
+
+export { Loading, Spinner };

package/dist/components/status.d.ts

@@ -0,0 +1,27 @@
+import * as react from 'react';
+
+type StatusType = "success" | "warning" | "error" | "info" | "neutral";
+/**
+ * Props for the Status component.
+ */
+interface StatusProps {
+    /** Visual style variant */
+    type?: StatusType;
+    /** Status text content */
+    children: string;
+}
+declare const Status: react.NamedExoticComponent<StatusProps>;
+/**
+ * Props for the StatusDot component.
+ */
+interface StatusDotProps {
+    /** Visual style variant */
+    type?: StatusType;
+    /** Accessible label for screen readers */
+    label?: string;
+    /** Enable pulse animation */
+    pulse?: boolean;
+}
+declare const StatusDot: react.NamedExoticComponent<StatusDotProps>;
+
+export { Status, StatusDot, type StatusDotProps, type StatusProps, type StatusType };

package/dist/components/status.js

@@ -0,0 +1,63 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { memo } from 'react';
+
+const statusStyles = {
+  success: "bg-emerald-500/10 text-emerald-400 border-emerald-500/20",
+  warning: "bg-amber-500/10 text-amber-400 border-amber-500/20",
+  error: "bg-red-500/10 text-red-400 border-red-500/20",
+  info: "bg-blue-500/10 text-blue-400 border-blue-500/20",
+  neutral: "bg-zinc-500/10 text-zinc-400 border-zinc-500/20"
+};
+const dotStyles = {
+  success: "bg-emerald-400",
+  warning: "bg-amber-400",
+  error: "bg-red-400",
+  info: "bg-blue-400",
+  neutral: "bg-zinc-400"
+};
+const Status = memo(function Status2({
+  type = "neutral",
+  children
+}) {
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      role: "status",
+      "aria-label": `Status ${type}: ${children}`,
+      "aria-live": "polite",
+      className: `inline-flex items-center gap-1.5 px-2.5 py-1 text-xs font-medium rounded-full border ${statusStyles[type]}`,
+      children: [
+        /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: `w-1.5 h-1.5 rounded-full ${dotStyles[type]}` }),
+        children
+      ]
+    }
+  );
+});
+const StatusDot = memo(function StatusDot2({
+  type = "neutral",
+  label,
+  pulse = false
+}) {
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      role: "status",
+      "aria-label": label ?? `Status: ${type}`,
+      "aria-live": "polite",
+      className: "relative inline-flex",
+      children: [
+        /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: `w-2 h-2 rounded-full ${dotStyles[type]}` }),
+        pulse && /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: `absolute inset-0 w-2 h-2 rounded-full animate-ping opacity-75 ${dotStyles[type]}`
+          }
+        )
+      ]
+    }
+  );
+});
+
+export { Status, StatusDot };

package/dist/components/steps.d.ts

@@ -0,0 +1,30 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+
+/**
+ * Container for Step components with automatic numbering.
+ * Uses CSS counters for step numbers.
+ * @property children - Step elements to display
+ * @example
+ * ```tsx
+ * <Steps>
+ *   <Step>First step content</Step>
+ *   <Step>Second step content</Step>
+ * </Steps>
+ * ```
+ */
+interface StepsProps {
+    children: ReactNode;
+}
+declare const Steps: react.NamedExoticComponent<StepsProps>;
+/**
+ * Individual step within a Steps container.
+ * Automatically numbered via CSS counter.
+ * @property children - step content, typically includes h3 heading
+ */
+interface StepProps {
+    children: ReactNode;
+}
+declare const Step: react.NamedExoticComponent<StepProps>;
+
+export { Step, type StepProps, Steps, type StepsProps };

package/dist/components/steps.js

@@ -0,0 +1,15 @@
+"use client";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { memo } from 'react';
+
+const Steps = memo(function Steps2({ children }) {
+  return /* @__PURE__ */ jsx("div", { className: "steps my-6 ml-4 border-l border-line pl-6 [counter-reset:step]", children });
+});
+const Step = memo(function Step2({ children }) {
+  return /* @__PURE__ */ jsxs("div", { className: "step relative pb-8 last:pb-0 [counter-increment:step]", children: [
+    /* @__PURE__ */ jsx("div", { className: "absolute -left-[34px] flex size-6 items-center justify-center rounded-full border border-line bg-bg text-xs font-medium text-muted before:content-[counter(step)]" }),
+    /* @__PURE__ */ jsx("div", { className: "[&>h3]:mt-0 [&>h3]:text-base [&>h3]:font-medium", children })
+  ] });
+});
+
+export { Step, Steps };

package/dist/components/switch.d.ts

@@ -0,0 +1,26 @@
+import react__default, { ComponentPropsWithoutRef, ReactNode } from 'react';
+
+/**
+ * Available sizes for the switch component.
+ */
+type SwitchSize = "sm" | "md" | "lg";
+/**
+ * Props for the Switch component.
+ * @property checked - Whether the switch is on.
+ * @property onChange - Callback when toggled.
+ * @property size - Switch size (sm, md, lg).
+ * @property label - Accessible label text.
+ * @property disabled - Whether the switch is disabled.
+ * @property tooltip - Help text shown on hover.
+ */
+interface SwitchProps extends Omit<ComponentPropsWithoutRef<"button">, "onChange"> {
+    checked?: boolean;
+    onChange?: (checked: boolean) => void;
+    size?: SwitchSize;
+    label?: string;
+    tooltip?: ReactNode;
+}
+declare function SwitchComponent({ checked, onChange, size, label, tooltip, disabled, className, id, ...props }: SwitchProps): react__default.ReactElement;
+declare const Switch: react__default.MemoExoticComponent<typeof SwitchComponent>;
+
+export { Switch, type SwitchProps, type SwitchSize };

package/dist/components/switch.js

@@ -0,0 +1,79 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { memo, useId } from 'react';
+import { FormLabel } from './formlabel';
+
+const trackSizes = {
+  sm: "h-4 w-7",
+  md: "h-5 w-9",
+  lg: "h-6 w-11"
+};
+const thumbSizes = {
+  sm: { size: "size-3", translate: "translate-x-3" },
+  md: { size: "size-4", translate: "translate-x-4" },
+  lg: { size: "size-5", translate: "translate-x-5" }
+};
+function SwitchComponent({
+  checked = false,
+  onChange,
+  size = "md",
+  label,
+  tooltip,
+  disabled = false,
+  className = "",
+  id,
+  ...props
+}) {
+  const generatedId = useId();
+  const switchId = id || generatedId;
+  const handleClick = () => {
+    onChange?.(!checked);
+  };
+  const handleKeyDown = (event) => {
+    if (event.key === " " || event.key === "Enter") {
+      event.preventDefault();
+      onChange?.(!checked);
+    }
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        id: switchId,
+        type: "button",
+        role: "switch",
+        "aria-checked": checked,
+        "aria-disabled": disabled,
+        disabled,
+        onClick: handleClick,
+        onKeyDown: handleKeyDown,
+        className: `
+					relative inline-flex shrink-0 cursor-pointer items-center rounded-full
+					border border-transparent transition-colors
+					focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 focus-visible:ring-offset-bg
+					disabled:cursor-not-allowed disabled:opacity-50
+					${checked ? "bg-accent" : "bg-line"}
+					${trackSizes[size]}
+					${className}
+				`.trim(),
+        ...props,
+        children: /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: `
+						pointer-events-none inline-block rounded-full bg-white shadow-sm
+						ring-0 transition-transform
+						${thumbSizes[size].size}
+						${checked ? thumbSizes[size].translate : "translate-x-0.5"}
+					`.trim()
+          }
+        )
+      }
+    ),
+    label && /* @__PURE__ */ jsx("span", { className: disabled ? "opacity-50" : "cursor-pointer", children: /* @__PURE__ */ jsx(FormLabel, { label, tooltip, htmlFor: switchId }) })
+  ] });
+}
+const Switch = memo(SwitchComponent);
+
+export { Switch };

package/dist/components/table.d.ts

@@ -0,0 +1,36 @@
+import { ReactNode } from 'react';
+
+/**
+ * Sort direction for table columns
+ */
+type SortDirection = "asc" | "desc" | null;
+/**
+ * Column definition for the table
+ * @template T - Row data type
+ */
+interface TableColumn<T> {
+    key: keyof T & string;
+    header: string;
+    sortable?: boolean;
+    width?: string;
+    render?: (value: T[keyof T], row: T) => ReactNode;
+    hideOnMobile?: boolean;
+}
+/**
+ * Props for the Table component
+ * @template T - Row data type extending Record<string, unknown>
+ */
+interface TableProps<T extends Record<string, unknown>> {
+    data: T[];
+    columns: TableColumn<T>[];
+    defaultSort?: keyof T & string;
+    defaultDirection?: SortDirection;
+    striped?: boolean;
+    hoverable?: boolean;
+    compact?: boolean;
+    caption?: string;
+    className?: string;
+}
+declare function Table<T extends Record<string, unknown>>({ data, columns, defaultSort, defaultDirection, striped, hoverable, compact, caption, className, }: TableProps<T>): ReactNode;
+
+export { type SortDirection, Table, type TableColumn, type TableProps };