@astralui/core 0.1.6 → 0.1.8

package/dist/index.d.cts

@@ -274,4 +274,33 @@ interface StatusBadgeProps {
 }
 declare function StatusBadge({ status, label, color, filled }: StatusBadgeProps): react.JSX.Element;
 
-export { AstralDrawer, AstralMenu, type AstralMenuItem, AstralModal, AstralPinInput, AstralSelect, type AstralSelectOption, type AstralThemeColors, AstralThemeProvider, AstralToaster, AuthCard, AuthShell, Avatar, type AvatarProps, type ColorScheme, ColorSchemeProvider, ConfirmModal, type ConfirmModalProps, DateInput, Delta, Donut, type DonutDatum, FunnelBars, type FunnelDatum, GridBackground, SpaceBackground, Sparkline, Spinner, StackedBars, type StackedRow, type StackedSeries, StatusBadge, type StatusBadgeProps, type ToastOptions, buildOrgCss, chartColor, dateTimeToInputStr, dateToInputStr, generateColors, notifications, useColorScheme, useThemePreview };
+interface SearchInputProps {
+    value: string;
+    onChange: (value: string) => void;
+    placeholder?: string;
+    /** runs when the clear button is pressed (defaults to onChange('')) */
+    onClear?: () => void;
+    autoFocus?: boolean;
+    disabled?: boolean;
+    className?: string;
+    style?: CSSProperties;
+    'aria-label'?: string;
+}
+declare function SearchInput({ value, onChange, placeholder, onClear, autoFocus, disabled, className, style, 'aria-label': ariaLabel, }: SearchInputProps): react.JSX.Element;
+
+interface CollapsibleProps {
+    /** Header content - clicking it toggles the region. */
+    title: ReactNode;
+    children: ReactNode;
+    /** Uncontrolled initial state (ignored when `open` is provided). */
+    defaultOpen?: boolean;
+    /** Controlled open state. Pair with `onOpenChange`. */
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    disabled?: boolean;
+    className?: string;
+    style?: CSSProperties;
+}
+declare function Collapsible({ title, children, defaultOpen, open: controlledOpen, onOpenChange, disabled, className, style, }: CollapsibleProps): react.JSX.Element;
+
+export { AstralDrawer, AstralMenu, type AstralMenuItem, AstralModal, AstralPinInput, AstralSelect, type AstralSelectOption, type AstralThemeColors, AstralThemeProvider, AstralToaster, AuthCard, AuthShell, Avatar, type AvatarProps, Collapsible, type CollapsibleProps, type ColorScheme, ColorSchemeProvider, ConfirmModal, type ConfirmModalProps, DateInput, Delta, Donut, type DonutDatum, FunnelBars, type FunnelDatum, GridBackground, SearchInput, type SearchInputProps, SpaceBackground, Sparkline, Spinner, StackedBars, type StackedRow, type StackedSeries, StatusBadge, type StatusBadgeProps, type ToastOptions, buildOrgCss, chartColor, dateTimeToInputStr, dateToInputStr, generateColors, notifications, useColorScheme, useThemePreview };

package/dist/index.d.ts

@@ -274,4 +274,33 @@ interface StatusBadgeProps {
 }
 declare function StatusBadge({ status, label, color, filled }: StatusBadgeProps): react.JSX.Element;
 
-export { AstralDrawer, AstralMenu, type AstralMenuItem, AstralModal, AstralPinInput, AstralSelect, type AstralSelectOption, type AstralThemeColors, AstralThemeProvider, AstralToaster, AuthCard, AuthShell, Avatar, type AvatarProps, type ColorScheme, ColorSchemeProvider, ConfirmModal, type ConfirmModalProps, DateInput, Delta, Donut, type DonutDatum, FunnelBars, type FunnelDatum, GridBackground, SpaceBackground, Sparkline, Spinner, StackedBars, type StackedRow, type StackedSeries, StatusBadge, type StatusBadgeProps, type ToastOptions, buildOrgCss, chartColor, dateTimeToInputStr, dateToInputStr, generateColors, notifications, useColorScheme, useThemePreview };
+interface SearchInputProps {
+    value: string;
+    onChange: (value: string) => void;
+    placeholder?: string;
+    /** runs when the clear button is pressed (defaults to onChange('')) */
+    onClear?: () => void;
+    autoFocus?: boolean;
+    disabled?: boolean;
+    className?: string;
+    style?: CSSProperties;
+    'aria-label'?: string;
+}
+declare function SearchInput({ value, onChange, placeholder, onClear, autoFocus, disabled, className, style, 'aria-label': ariaLabel, }: SearchInputProps): react.JSX.Element;
+
+interface CollapsibleProps {
+    /** Header content - clicking it toggles the region. */
+    title: ReactNode;
+    children: ReactNode;
+    /** Uncontrolled initial state (ignored when `open` is provided). */
+    defaultOpen?: boolean;
+    /** Controlled open state. Pair with `onOpenChange`. */
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    disabled?: boolean;
+    className?: string;
+    style?: CSSProperties;
+}
+declare function Collapsible({ title, children, defaultOpen, open: controlledOpen, onOpenChange, disabled, className, style, }: CollapsibleProps): react.JSX.Element;
+
+export { AstralDrawer, AstralMenu, type AstralMenuItem, AstralModal, AstralPinInput, AstralSelect, type AstralSelectOption, type AstralThemeColors, AstralThemeProvider, AstralToaster, AuthCard, AuthShell, Avatar, type AvatarProps, Collapsible, type CollapsibleProps, type ColorScheme, ColorSchemeProvider, ConfirmModal, type ConfirmModalProps, DateInput, Delta, Donut, type DonutDatum, FunnelBars, type FunnelDatum, GridBackground, SearchInput, type SearchInputProps, SpaceBackground, Sparkline, Spinner, StackedBars, type StackedRow, type StackedSeries, StatusBadge, type StatusBadgeProps, type ToastOptions, buildOrgCss, chartColor, dateTimeToInputStr, dateToInputStr, generateColors, notifications, useColorScheme, useThemePreview };

package/dist/index.js

@@ -1,8 +1,8 @@
-import { createContext, useState, useEffect, useCallback, useContext, useMemo, useRef, useSyncExternalStore } from 'react';
+import { createContext, useState, useEffect, useCallback, useContext, useMemo, useRef, useSyncExternalStore, useLayoutEffect } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import chroma from 'chroma-js';
 import { createPortal } from 'react-dom';
-import { IconX, IconChevronDown, IconInfoCircle, IconAlertTriangle, IconExclamationCircle, IconCheck } from '@tabler/icons-react';
+import { IconX, IconChevronDown, IconSearch, IconInfoCircle, IconAlertTriangle, IconExclamationCircle, IconCheck } from '@tabler/icons-react';
 
 // src/theme/ColorSchemeProvider.tsx
 var ColorSchemeContext = createContext({
@@ -913,7 +913,82 @@ function StatusBadge({ status, label, color, filled }) {
     }
   );
 }
+function SearchInput({
+  value,
+  onChange,
+  placeholder,
+  onClear,
+  autoFocus,
+  disabled,
+  className,
+  style,
+  "aria-label": ariaLabel
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: `au-search${className ? " " + className : ""}`, style, children: [
+    /* @__PURE__ */ jsx(IconSearch, { size: 15 }),
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        value,
+        onChange: (e) => onChange(e.currentTarget.value),
+        placeholder,
+        "aria-label": ariaLabel ?? placeholder ?? "Search",
+        autoFocus,
+        disabled
+      }
+    ),
+    value && !disabled && /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: "clr",
+        onClick: () => onClear ? onClear() : onChange(""),
+        "aria-label": "Clear search",
+        children: /* @__PURE__ */ jsx(IconX, { size: 13 })
+      }
+    )
+  ] });
+}
+function Collapsible({
+  title,
+  children,
+  defaultOpen = false,
+  open: controlledOpen,
+  onOpenChange,
+  disabled,
+  className,
+  style
+}) {
+  const isControlled = controlledOpen !== void 0;
+  const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);
+  const open = isControlled ? controlledOpen : uncontrolledOpen;
+  const innerRef = useRef(null);
+  const [maxH, setMaxH] = useState(0);
+  useLayoutEffect(() => {
+    const el = innerRef.current;
+    if (!el) return;
+    const sync = () => setMaxH(open ? el.scrollHeight : 0);
+    sync();
+    if (!open) return;
+    const ro = new ResizeObserver(sync);
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, [open, children]);
+  const toggle = useCallback(() => {
+    if (disabled) return;
+    const next = !open;
+    if (!isControlled) setUncontrolledOpen(next);
+    onOpenChange?.(next);
+  }, [disabled, open, isControlled, onOpenChange]);
+  return /* @__PURE__ */ jsxs("div", { className: `au-collapse${open ? " au-collapse--open" : ""}${className ? " " + className : ""}`, style, children: [
+    /* @__PURE__ */ jsxs("button", { type: "button", className: "au-collapse-head", "aria-expanded": open, disabled, onClick: toggle, children: [
+      /* @__PURE__ */ jsx("span", { className: "au-collapse-title", children: title }),
+      /* @__PURE__ */ jsx(IconChevronDown, { size: 16, className: "au-collapse-chev", "aria-hidden": true })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "au-collapse-region", style: { maxHeight: open ? maxH : 0 }, children: /* @__PURE__ */ jsx("div", { className: "au-collapse-inner", ref: innerRef, children }) })
+  ] });
+}
 
-export { AstralDrawer, AstralMenu, AstralModal, AstralPinInput, AstralSelect, AstralThemeProvider, AstralToaster, AuthCard, AuthShell, Avatar, ColorSchemeProvider, ConfirmModal, DateInput, Delta, Donut, FunnelBars, GridBackground, SpaceBackground, Sparkline, Spinner2 as Spinner, StackedBars, StatusBadge, buildOrgCss, chartColor, dateTimeToInputStr, dateToInputStr, generateColors, notifications, useColorScheme, useThemePreview };
+export { AstralDrawer, AstralMenu, AstralModal, AstralPinInput, AstralSelect, AstralThemeProvider, AstralToaster, AuthCard, AuthShell, Avatar, Collapsible, ColorSchemeProvider, ConfirmModal, DateInput, Delta, Donut, FunnelBars, GridBackground, SearchInput, SpaceBackground, Sparkline, Spinner2 as Spinner, StackedBars, StatusBadge, buildOrgCss, chartColor, dateTimeToInputStr, dateToInputStr, generateColors, notifications, useColorScheme, useThemePreview };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map