@indxsearch/systm 1.0.0

package/README.md

@@ -0,0 +1,53 @@
+# @indxsearch/systm
+
+Base UI component library for indxSearch applications.
+
+## Installation
+
+```bash
+npm install @indxsearch/systm
+```
+
+**Note:** `@indxsearch/pixl` (icon library) is included as a dependency and will be installed automatically.
+
+## Usage
+
+```tsx
+import { Button, Checkbox, InputField } from '@indxsearch/systm';
+import '@indxsearch/systm/styles.css';
+
+function App() {
+  return (
+    <div>
+      <Button variant="primary">Click me</Button>
+      <Checkbox label="Accept terms" />
+      <InputField placeholder="Enter text" />
+    </div>
+  );
+}
+```
+
+## Components
+
+- **Button** - Customizable button with variants
+- **Checkbox** - Checkbox input component
+- **InputField** - Text input field
+- **RadioButton** - Radio button input
+- **SearchField** - Search input with icon
+- **Select** - Radix UI select dropdown
+- **Slider** - Range slider component
+- **ToggleSwitch** - Toggle switch input
+- **Popover** - Radix UI popover component
+- **Base** - Base container component
+- **FilterPanelBase** - Filter panel container
+
+## Dependencies
+
+- `@indxsearch/pixl` - Icon library
+- `@radix-ui/react-select` - Select component primitives
+- `react-range` - Range slider component
+
+## Peer Dependencies
+
+- React 19.0.0+
+- React DOM 19.0.0+

package/dist/components/Base/Base.d.ts

@@ -0,0 +1,6 @@
+import { ReactNode } from 'react';
+export type BaseProps = {
+    children: ReactNode;
+    className?: string;
+};
+export declare function Base({ children, className }: BaseProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Button/Button.d.ts

@@ -0,0 +1,13 @@
+import { default as React } from 'react';
+interface IconProps {
+    size?: string | number;
+    color?: string;
+}
+export declare function Button(props: Omit<React.ComponentProps<'button'>, 'className'> & {
+    size?: 'micro' | 'default' | 'large';
+    variant?: 'primary' | 'secondary' | 'ghost';
+    iconLeft?: React.ReactElement<IconProps>;
+    iconRight?: React.ReactElement<IconProps>;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Checkbox/Checkbox.d.ts

@@ -0,0 +1,6 @@
+import { default as React } from 'react';
+export interface CheckboxProps extends React.InputHTMLAttributes<HTMLInputElement> {
+    label?: string;
+    score?: string;
+}
+export declare const Checkbox: ({ label, score, className, ...props }: CheckboxProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/FilterPanelBase/FilterPanelBase.d.ts

@@ -0,0 +1,10 @@
+import { ReactNode } from 'react';
+type Props = {
+    title?: string;
+    children: ReactNode;
+    className?: string;
+    collapsible?: boolean;
+    collapsed?: boolean;
+};
+export declare function FilterPanelBase({ title, children, className, collapsible, collapsed, }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/InputField/InputField.d.ts

@@ -0,0 +1,9 @@
+import { default as React } from 'react';
+export interface InputFieldProps extends React.InputHTMLAttributes<HTMLInputElement> {
+    label?: string;
+    error?: string;
+    className?: string;
+    isValid?: boolean;
+    variant?: 'default' | 'borderBottom';
+}
+export declare function InputField({ label, error, className, isValid, variant, ...props }: InputFieldProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Popover/Popover.d.ts

@@ -0,0 +1,12 @@
+import { default as React } from 'react';
+export interface PopoverProps {
+    trigger: React.ReactNode;
+    children: React.ReactNode;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    align?: 'start' | 'center' | 'end';
+    side?: 'top' | 'right' | 'bottom' | 'left';
+    sideOffset?: number;
+    className?: string;
+}
+export declare const Popover: React.FC<PopoverProps>;

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

@@ -0,0 +1,2 @@
+export { Popover } from './Popover';
+export type { PopoverProps } from './Popover';

package/dist/components/RadioButton/RadioButton.d.ts

@@ -0,0 +1,12 @@
+import { default as React } from 'react';
+type RadioButtonProps = {
+    id: string;
+    name: string;
+    value: string;
+    label: string;
+    checked?: boolean;
+    onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    disabled?: boolean;
+};
+export declare const RadioButton: React.FC<RadioButtonProps>;
+export {};

package/dist/components/SearchField/SearchField.d.ts

@@ -0,0 +1,19 @@
+import { default as React } from 'react';
+interface IconProps {
+    size?: string | number;
+    color?: string;
+}
+export type InputSize = 'micro' | 'default';
+export interface SearchFieldProps extends React.InputHTMLAttributes<HTMLInputElement> {
+    label?: string;
+    error?: string;
+    className?: string;
+    showSearchIcon?: boolean;
+    searchIcon?: React.ReactElement<IconProps>;
+    searchIconColor?: string;
+    inputSize?: InputSize;
+    showFocusBorder?: boolean;
+    children?: React.ReactNode;
+}
+export declare function SearchField({ label, error, className, showSearchIcon, searchIcon, searchIconColor, inputSize, showFocusBorder, children, ...props }: SearchFieldProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Select/Select.d.ts

@@ -0,0 +1,14 @@
+import { default as React } from 'react';
+export interface SelectOption {
+    label: string;
+    value: string;
+}
+export interface SelectProps {
+    value: string;
+    onValueChange: (value: string) => void;
+    options: SelectOption[];
+    placeholder?: string;
+    className?: string;
+    disabled?: boolean;
+}
+export declare const Select: React.FC<SelectProps>;

package/dist/components/Slider/Slider.d.ts

@@ -0,0 +1,26 @@
+import { default as React } from 'react';
+type SingleValue = number;
+type RangeValue = [number, number];
+interface BaseSliderProps {
+    min: number;
+    max: number;
+    step?: number;
+    disabled?: boolean;
+    className?: string;
+    activeMin?: number;
+    activeMax?: number;
+    isFaceted?: boolean;
+    highlightFaceted?: boolean;
+    onChange: (val: SingleValue | RangeValue) => void;
+    onFinalChange?: (val: SingleValue | RangeValue) => void;
+}
+type SliderProps = (BaseSliderProps & {
+    value: SingleValue;
+    isRange?: false;
+}) | (BaseSliderProps & {
+    value: RangeValue;
+    isRange: true;
+    isFaceted?: boolean;
+});
+export declare const Slider: React.FC<SliderProps>;
+export {};

package/dist/components/ToggleSwitch/ToggleSwitch.d.ts

@@ -0,0 +1,10 @@
+import { default as React } from 'react';
+type ToggleSwitchProps = {
+    id?: string;
+    checked: boolean;
+    onChange: (checked: boolean) => void;
+    disabled?: boolean;
+    label?: string;
+};
+export declare const ToggleSwitch: React.FC<ToggleSwitchProps>;
+export {};

package/dist/index.d.ts

@@ -0,0 +1,12 @@
+export { Button } from './components/Button/Button';
+export { Checkbox } from './components/Checkbox/Checkbox';
+export { Base, type BaseProps } from './components/Base/Base';
+export { FilterPanelBase } from './components/FilterPanelBase/FilterPanelBase';
+export { SearchField } from './components/SearchField/SearchField';
+export type InputSize = 'micro' | 'default';
+export { InputField } from './components/InputField/InputField';
+export { RadioButton } from './components/RadioButton/RadioButton';
+export { ToggleSwitch } from './components/ToggleSwitch/ToggleSwitch';
+export { Slider } from './components/Slider/Slider';
+export { Select, type SelectOption, type SelectProps } from './components/Select/Select';
+export { Popover, type PopoverProps } from './components/Popover';