@indxsearch/systm 1.0.0 → 1.2.0

package/README.md

@@ -41,6 +41,31 @@ function App() {
 - **Base** - Base container component
 - **FilterPanelBase** - Filter panel container
 
+## Custom Cursors (Optional)
+
+Systm includes an optional custom cursor system with 13 cursor utilities. Import the cursors stylesheet to enable:
+
+```tsx
+import '@indxsearch/systm/styles.css';
+import '@indxsearch/systm/cursors.css'; // Optional custom cursors
+```
+
+**Available cursor utilities:**
+- `.cursor-pointer` - Hand cursor for clickable elements
+- `.cursor-text` - I-beam cursor for text selection
+- `.cursor-resize-col` - Column resize cursor
+- `.cursor-resize-ew` - Horizontal resize (↔)
+- `.cursor-resize-ns` - Vertical resize (↕)
+- `.cursor-resize-nwse` - Diagonal resize (↖↘)
+- `.cursor-resize-nesw` - Diagonal resize (↗↙)
+- `.cursor-move` - Four-way move cursor
+- `.cursor-crosshair` - Crosshair for precise selection
+- `.cursor-help` - Help cursor
+- `.cursor-wait` - Loading cursor
+- `.cursor-not-allowed` - Disabled state cursor
+
+All cursors automatically adapt to dark mode via `prefers-color-scheme`.
+
 ## Dependencies
 
 - `@indxsearch/pixl` - Icon library

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

@@ -1,4 +1,4 @@
-import { default as React } from 'react';
+import React from 'react';
 interface IconProps {
     size?: string | number;
     color?: string;

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

@@ -1,4 +1,4 @@
-import { default as React } from 'react';
+import React from 'react';
 export interface CheckboxProps extends React.InputHTMLAttributes<HTMLInputElement> {
     label?: string;
     score?: string;

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

@@ -1,4 +1,4 @@
-import { default as React } from 'react';
+import React from 'react';
 export interface InputFieldProps extends React.InputHTMLAttributes<HTMLInputElement> {
     label?: string;
     error?: string;

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

@@ -1,4 +1,4 @@
-import { default as React } from 'react';
+import React from 'react';
 export interface PopoverProps {
     trigger: React.ReactNode;
     children: React.ReactNode;

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

@@ -1,4 +1,4 @@
-import { default as React } from 'react';
+import React from "react";
 type RadioButtonProps = {
     id: string;
     name: string;

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

@@ -1,4 +1,4 @@
-import { default as React } from 'react';
+import React from 'react';
 interface IconProps {
     size?: string | number;
     color?: string;

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

@@ -1,4 +1,4 @@
-import { default as React } from 'react';
+import React from 'react';
 export interface SelectOption {
     label: string;
     value: string;

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

@@ -1,4 +1,4 @@
-import { default as React } from 'react';
+import React from 'react';
 type SingleValue = number;
 type RangeValue = [number, number];
 interface BaseSliderProps {

package/dist/components/Table/Table.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+interface TableProps {
+    children: React.ReactNode;
+}
+export declare function Table({ children }: TableProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Table/TableCell.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+interface TableCellProps {
+    label?: string;
+    children?: React.ReactNode;
+}
+export declare function TableCell({ label, children }: TableCellProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Table/TableHeader.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+interface TableHeaderProps {
+    children: React.ReactNode;
+}
+export declare function TableHeader({ children }: TableHeaderProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Table/TableIcon.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+interface IconProps {
+    size?: string | number;
+    color?: string;
+}
+interface TableIconProps {
+    children: React.ReactElement<IconProps>;
+}
+export declare function TableIcon({ children }: TableIconProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Table/TableRow.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+interface TableRowProps {
+    children: React.ReactNode;
+}
+export declare function TableRow({ children }: TableRowProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Table/TableValue.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+interface TableValueProps {
+    children: React.ReactNode;
+}
+export declare function TableValue({ children }: TableValueProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,6 @@
+export { Table } from './Table';
+export { TableHeader } from './TableHeader';
+export { TableRow } from './TableRow';
+export { TableCell } from './TableCell';
+export { TableValue } from './TableValue';
+export { TableIcon } from './TableIcon';

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

@@ -1,4 +1,4 @@
-import { default as React } from 'react';
+import React from "react";
 type ToggleSwitchProps = {
     id?: string;
     checked: boolean;

package/dist/cursors.css

@@ -0,0 +1,196 @@
+/* Custom Cursors - 21x21 */
+
+/* Default: Arrow cursor */
+* {
+  cursor: url('data:image/svg+xml,<svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9 3H15V6H18V9H12V15H9V12H6V6H3V0H9V3Z" fill="%231A1A21"/></svg>') 3 0, auto !important;
+}
+
+/* I-beam: Text elements */
+p, h1, h2, h3, h4, h5, h6, td, th,
+input,
+textarea {
+  cursor: url('data:image/svg+xml,<svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9 18H6V15H9V18ZM15 18H12V15H15V18ZM12 15H9V6H12V15ZM9 6H6V3H9V6ZM15 6H12V3H15V6Z" fill="%231A1A21"/></svg>') 10 10, text !important;
+}
+
+/* Pointer: Interactive elements */
+a, button,
+input[type="radio"],
+input[type="checkbox"],
+input[type="submit"],
+input[type="button"],
+input[type="range"],
+select {
+  cursor: url('data:image/svg+xml,<svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M9 0V3V6V9V12H6V9H3V12H6V15H9H12H15H18V12V9V6H15H12V3V0H9Z" fill="%231A1A21"/></svg>') 6 0, pointer !important;
+}
+
+/* Text inside clickable elements should have pointer */
+a *, button * {
+  cursor: url('data:image/svg+xml,<svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M9 0V3V6V9V12H6V9H3V12H6V15H9H12H15H18V12V9V6H15H12V3V0H9Z" fill="%231A1A21"/></svg>') 6 0, pointer !important;
+}
+
+/* Utility classes */
+.cursor-pointer,
+.cursor-pointer * {
+  cursor: url('data:image/svg+xml,<svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M9 0V3V6V9V12H6V9H3V12H6V15H9H12H15H18V12V9V6H15H12V3V0H9Z" fill="%231A1A21"/></svg>') 6 0, pointer !important;
+}
+
+.cursor-text,
+.cursor-text * {
+  cursor: url('data:image/svg+xml,<svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9 18H6V15H9V18ZM15 18H12V15H15V18ZM12 15H9V6H12V15ZM9 6H6V3H9V6ZM15 6H12V3H15V6Z" fill="%231A1A21"/></svg>') 10 10, text !important;
+}
+
+.cursor-resize-col,
+.cursor-resize-col * {
+  cursor: url('data:image/svg+xml,<svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 18H9V3H12V18ZM6 15H3V12H6V15ZM18 15H15V12H18V15ZM3 12H0V9H3V12ZM21 12H18V9H21V12ZM6 9H3V6H6V9ZM18 9H15V6H18V9Z" fill="%231A1A21"/></svg>') 10 10, col-resize !important;
+}
+
+.cursor-resize-ew,
+.cursor-resize-ew * {
+  cursor: url('data:image/svg+xml,<svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9 15H6V12H9V15ZM15 15H12V12H15V15ZM6 12H3V9H6V12ZM18 12H15V9H18V12ZM9 9H6V6H9V9ZM15 9H12V6H15V9Z" fill="%23080809"/></svg>') 10 10, ew-resize !important;
+}
+
+.cursor-resize-ns,
+.cursor-resize-ns * {
+  cursor: url('data:image/svg+xml,<svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 18H9V15H12V18ZM9 15H6V12H9V15ZM15 12V15H12V12H15ZM9 9H6V6H9V9ZM15 9H12V6H15V9ZM12 6H9V3H12V6Z" fill="%23080809"/></svg>') 10 10, ns-resize !important;
+}
+
+.cursor-not-allowed,
+.cursor-not-allowed * {
+  cursor: url('data:image/svg+xml,<svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M15 6H18V15H15V18H6V15H3V6H6V3H15V6ZM6 12H15V9H6V12Z" fill="%231A1A21"/></svg>') 10 10, not-allowed !important;
+}
+
+.cursor-wait,
+.cursor-wait * {
+  cursor: url('data:image/svg+xml,<svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M6 3H3V6H6V9H9V12H6V15H3V18H6H9H12H15H18V15H15V12H12V9H15V6H18V3H15H12H9H6ZM12 9H9V6H12V9Z" fill="%23080809"/></svg>') 10 10, wait !important;
+}
+
+.cursor-help,
+.cursor-help * {
+  cursor: url('data:image/svg+xml,<svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 18H9V15H12V18ZM12 12H9V9H12V12ZM15 9H12V6H15V9ZM12 3V6H6V3H12Z" fill="%23080809"/></svg>') 10 10, help !important;
+}
+
+.cursor-move,
+.cursor-move * {
+  cursor: url('data:image/svg+xml,<svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 18H9V15H12V18ZM6 12H3V9H6V12ZM12 12H9V9H12V12ZM18 12H15V9H18V12ZM12 6H9V3H12V6Z" fill="%23080809"/></svg>') 10 10, move !important;
+}
+
+.cursor-crosshair,
+.cursor-crosshair * {
+  cursor: url('data:image/svg+xml,<svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 18H9V12H12V18ZM9 12H3V9H9V12ZM18 9V12H12V9H18ZM12 9H9V3H12V9Z" fill="%23080809"/></svg>') 10 10, crosshair !important;
+}
+
+.cursor-resize-nwse,
+.cursor-resize-nwse * {
+  cursor: url('data:image/svg+xml,<svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M18 18H12V15H15V12H18V18ZM9 3V6H6V9H3V3H9Z" fill="%23080809"/></svg>') 10 10, nwse-resize !important;
+}
+
+.cursor-resize-nesw,
+.cursor-resize-nesw * {
+  cursor: url('data:image/svg+xml,<svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6 15H9V18H3V12H6V15ZM18 9H15V6H12V3H18V9Z" fill="%23080809"/></svg>') 10 10, nesw-resize !important;
+}
+
+/* Disabled states */
+input:disabled,
+textarea:disabled,
+button:disabled,
+select:disabled,
+.disabled,
+.disabled * {
+  cursor: url('data:image/svg+xml,<svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M15 6H18V15H15V18H6V15H3V6H6V3H15V6ZM6 12H15V9H6V12Z" fill="%231A1A21"/></svg>') 10 10, not-allowed !important;
+}
+
+/* Dark Mode - Use CSS filter to invert colors */
+@media (prefers-color-scheme: dark) {
+  * {
+    cursor: url('data:image/svg+xml,<svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9 3H15V6H18V9H12V15H9V12H6V6H3V0H9V3Z" fill="%23EFEFEF"/></svg>') 3 0, auto !important;
+  }
+
+  p, h1, h2, h3, h4, h5, h6, td, th,
+  input,
+  textarea {
+    cursor: url('data:image/svg+xml,<svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9 18H6V15H9V18ZM15 18H12V15H15V18ZM12 15H9V6H12V15ZM9 6H6V3H9V6ZM15 6H12V3H15V6Z" fill="%23EFEFEF"/></svg>') 10 10, text !important;
+  }
+
+  a, button,
+  input[type="radio"],
+  input[type="checkbox"],
+  input[type="submit"],
+  input[type="button"],
+  input[type="range"],
+  select {
+    cursor: url('data:image/svg+xml,<svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M9 0V3V6V9V12H6V9H3V12H6V15H9H12H15H18V12V9V6H15H12V3V0H9Z" fill="%23EFEFEF"/></svg>') 6 0, pointer !important;
+  }
+
+  a *, button * {
+    cursor: url('data:image/svg+xml,<svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M9 0V3V6V9V12H6V9H3V12H6V15H9H12H15H18V12V9V6H15H12V3V0H9Z" fill="%23EFEFEF"/></svg>') 6 0, pointer !important;
+  }
+
+  .cursor-pointer,
+  .cursor-pointer * {
+    cursor: url('data:image/svg+xml,<svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M9 0V3V6V9V12H6V9H3V12H6V15H9H12H15H18V12V9V6H15H12V3V0H9Z" fill="%23EFEFEF"/></svg>') 6 0, pointer !important;
+  }
+
+  .cursor-text,
+  .cursor-text * {
+    cursor: url('data:image/svg+xml,<svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9 18H6V15H9V18ZM15 18H12V15H15V18ZM12 15H9V6H12V15ZM9 6H6V3H9V6ZM15 6H12V3H15V6Z" fill="%23EFEFEF"/></svg>') 10 10, text !important;
+  }
+
+  .cursor-resize-col,
+  .cursor-resize-col * {
+    cursor: url('data:image/svg+xml,<svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 18H9V3H12V18ZM6 15H3V12H6V15ZM18 15H15V12H18V15ZM3 12H0V9H3V12ZM21 12H18V9H21V12ZM6 9H3V6H6V9ZM18 9H15V6H18V9Z" fill="%23EFEFEF"/></svg>') 10 10, col-resize !important;
+  }
+
+  .cursor-resize-ew,
+  .cursor-resize-ew * {
+    cursor: url('data:image/svg+xml,<svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9 15H6V12H9V15ZM15 15H12V12H15V15ZM6 12H3V9H6V12ZM18 12H15V9H18V12ZM9 9H6V6H9V9ZM15 9H12V6H15V9Z" fill="%23EFEFEF"/></svg>') 10 10, ew-resize !important;
+  }
+
+  .cursor-resize-ns,
+  .cursor-resize-ns * {
+    cursor: url('data:image/svg+xml,<svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 18H9V15H12V18ZM9 15H6V12H9V15ZM15 12V15H12V12H15ZM9 9H6V6H9V9ZM15 9H12V6H15V9ZM12 6H9V3H12V6Z" fill="%23EFEFEF"/></svg>') 10 10, ns-resize !important;
+  }
+
+  .cursor-not-allowed,
+  .cursor-not-allowed * {
+    cursor: url('data:image/svg+xml,<svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M15 6H18V15H15V18H6V15H3V6H6V3H15V6ZM6 12H15V9H6V12Z" fill="%23EFEFEF"/></svg>') 10 10, not-allowed !important;
+  }
+
+  .cursor-wait,
+  .cursor-wait * {
+    cursor: url('data:image/svg+xml,<svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M6 3H3V6H6V9H9V12H6V15H3V18H6H9H12H15H18V15H15V12H12V9H15V6H18V3H15H12H9H6ZM12 9H9V6H12V9Z" fill="%23EFEFEF"/></svg>') 10 10, wait !important;
+  }
+
+  .cursor-help,
+  .cursor-help * {
+    cursor: url('data:image/svg+xml,<svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 18H9V15H12V18ZM12 12H9V9H12V12ZM15 9H12V6H15V9ZM12 3V6H6V3H12Z" fill="%23EFEFEF"/></svg>') 10 10, help !important;
+  }
+
+  .cursor-move,
+  .cursor-move * {
+    cursor: url('data:image/svg+xml,<svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 18H9V15H12V18ZM6 12H3V9H6V12ZM12 12H9V9H12V12ZM18 12H15V9H18V12ZM12 6H9V3H12V6Z" fill="%23EFEFEF"/></svg>') 10 10, move !important;
+  }
+
+  .cursor-crosshair,
+  .cursor-crosshair * {
+    cursor: url('data:image/svg+xml,<svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 18H9V12H12V18ZM9 12H3V9H9V12ZM18 9V12H12V9H18ZM12 9H9V3H12V9Z" fill="%23EFEFEF"/></svg>') 10 10, crosshair !important;
+  }
+
+  .cursor-resize-nwse,
+  .cursor-resize-nwse * {
+    cursor: url('data:image/svg+xml,<svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M18 18H12V15H15V12H18V18ZM9 3V6H6V9H3V3H9Z" fill="%23EFEFEF"/></svg>') 10 10, nwse-resize !important;
+  }
+
+  .cursor-resize-nesw,
+  .cursor-resize-nesw * {
+    cursor: url('data:image/svg+xml,<svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6 15H9V18H3V12H6V15ZM18 9H15V6H12V3H18V9Z" fill="%23EFEFEF"/></svg>') 10 10, nesw-resize !important;
+  }
+
+  input:disabled,
+  textarea:disabled,
+  button:disabled,
+  select:disabled,
+  .disabled,
+  .disabled * {
+    cursor: url('data:image/svg+xml,<svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M15 6H18V15H15V18H6V15H3V6H6V3H15V6ZM6 12H15V9H6V12Z" fill="%23EFEFEF"/></svg>') 10 10, not-allowed !important;
+  }
+}

package/dist/index.d.ts

@@ -1,3 +1,4 @@
+import './globals/globals.css';
 export { Button } from './components/Button/Button';
 export { Checkbox } from './components/Checkbox/Checkbox';
 export { Base, type BaseProps } from './components/Base/Base';
@@ -10,3 +11,4 @@ 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';
+export { Table, TableHeader, TableRow, TableCell, TableValue, TableIcon } from './components/Table';