@douglasneuroinformatics/libui 2.0.0-beta.9 → 2.0.0

package/README.md

@@ -40,6 +40,20 @@ designed as a generic implementation.
 pnpm install @douglasneuroinformatics/libui
 ```
 
+## Usage
+
+**tailwind.config.cjs**
+
+```javascript
+const baseConfig = require('@douglasneuroinformatics/libui/tailwind.config.cjs');
+
+/** @type {import('tailwindcss').Config} */
+module.exports {
+  content: [...baseConfig.content, './src/**/*.{js,ts,jsx,tsx}'],
+  presets: [baseConfig]
+};
+```
+
 ## Contributing
 
 We welcome contributions! If you're interested in improving the library or adding new features, please refer to our contribution guide.

package/dist/components/index.d.ts

@@ -869,8 +869,10 @@ type LanguageToggleProps = {
     options: {
         [key: string]: string;
     };
+    triggerClassName?: string;
+    variant?: ButtonProps['variant'];
 };
-declare const LanguageToggle: ({ align, options }?: LanguageToggleProps) => react_jsx_runtime.JSX.Element;
+declare const LanguageToggle: ({ align, options, triggerClassName, variant }: LanguageToggleProps) => react_jsx_runtime.JSX.Element;
 
 type LegacyDropdownOptions = {
     [key: string]: string;
@@ -1930,17 +1932,26 @@ declare const Resizable: ResizableType;
 
 declare const ScrollArea: react__default.ForwardRefExoticComponent<Omit<_radix_ui_react_scroll_area.ScrollAreaProps & react__default.RefAttributes<HTMLDivElement>, "ref"> & react__default.RefAttributes<HTMLDivElement>>;
 
-type SearchBarProps = {
+type BaseSearchBarProps = {
     /** Additional CSS classes to add to the wrapper form component, potentially overriding default styling */
     className?: string;
-    /** Event handler called when the value changes */
-    onValueChange: (value: string) => void;
+    /** An optional callback invoked when the user clicks the search bar */
+    onClick?: () => void;
     /** Custom placeholder to use instead of the default */
     placeholder?: string;
+};
+type ControlledSearchBarProps = BaseSearchBarProps & {
+    /** Event handler called when the value changes */
+    onValueChange: (value: string) => void;
     /** The controlled value of the search bar, which should be used in conjunction with onValueChange */
     value: string;
 };
-declare const SearchBar: ({ className, onValueChange, placeholder, value }: SearchBarProps) => react_jsx_runtime.JSX.Element;
+type UncontrolledSearchBarProps = BaseSearchBarProps & {
+    onValueChange?: never;
+    value?: never;
+};
+type SearchBarProps = ControlledSearchBarProps | UncontrolledSearchBarProps;
+declare const SearchBar: ({ className, onClick, onValueChange, placeholder, value }: SearchBarProps) => react_jsx_runtime.JSX.Element;
 
 declare const Select: react.FC<SelectPrimitive.SelectProps> & {
     Content: react.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectContentProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
@@ -1997,10 +2008,8 @@ declare const Tabs: react.ForwardRefExoticComponent<TabsPrimitive.TabsProps & re
 type TextAreaProps = react__default.TextareaHTMLAttributes<HTMLTextAreaElement>;
 declare const TextArea: react__default.ForwardRefExoticComponent<TextAreaProps & react__default.RefAttributes<HTMLTextAreaElement>>;
 
-type ThemeToggleProps = {
-    align?: 'center' | 'end' | 'start';
-};
-declare const ThemeToggle: () => react_jsx_runtime.JSX.Element;
+type ThemeToggleProps = Omit<ButtonProps, 'children' | 'size'>;
+declare const ThemeToggle: ({ onClick, variant, ...props }: ThemeToggleProps) => react_jsx_runtime.JSX.Element;
 
 type TooltipTriggerProps = Omit<ButtonProps, 'asChild'>;
 
@@ -2031,4 +2040,4 @@ declare const Tooltip: (({ children, delayDuration, skipDelayDuration }: Tooltip
     Trigger: react.ForwardRefExoticComponent<TooltipTriggerProps & react.RefAttributes<HTMLButtonElement>>;
 };
 
-export { Accordion, AlertDialog, ArrowToggle, type ArrowToggleProps, Avatar, BUTTON_ICON_SIZE, Badge, type BadgeProps, Breadcrumb, Button, type ButtonProps, Card, Checkbox, Collapsible, Command, ContextMenu, DatePicker, type DatePickerProps, Dialog, Drawer, DropdownButton, DropdownMenu, ErrorBoundary, ErrorFallback, type ErrorFallbackProps, Form, type FormProps, Heading, type HeadingProps, HoverCard, Input, type InputProps, Label, LanguageToggle, type LanguageToggleProps, LegacyClientTable, LegacyDropdown, type LegacyDropdownProps, type LegacyFieldFactory, LegacyModal, type LegacyModalProps, LegacySelectDropdown, type LegacySelectDropdownProps, type LegacySelectOption, LegacySlider, type LegacySliderProps, LegacyStepper, type LegacyStepperProps, LegacyTable, type LegacyTableColumn, type LegacyTableEntry, type LegacyTableProps, LineGraph, type LineGraphData, type LineGraphLine, MenuBar, NotificationHub, type NotificationHubProps, Pagination, Popover, Progress, RadioGroup, type RadioGroupProps, Resizable, ScrollArea, SearchBar, type SearchBarProps, Select, Separator, Sheet, Slider, Spinner, SpinnerIcon, type Step, Switch, Table, Tabs, TextArea, type TextAreaProps, ThemeToggle, type ThemeToggleProps, Tooltip, badgeVariants, buttonVariants, labelVariants };
+export { Accordion, AlertDialog, ArrowToggle, type ArrowToggleProps, Avatar, BUTTON_ICON_SIZE, Badge, type BadgeProps, type BaseSearchBarProps, Breadcrumb, Button, type ButtonProps, Card, Checkbox, Collapsible, Command, ContextMenu, DatePicker, type DatePickerProps, Dialog, Drawer, DropdownButton, DropdownMenu, ErrorBoundary, ErrorFallback, type ErrorFallbackProps, Form, type FormProps, Heading, type HeadingProps, HoverCard, Input, type InputProps, Label, LanguageToggle, type LanguageToggleProps, LegacyClientTable, LegacyDropdown, type LegacyDropdownProps, type LegacyFieldFactory, LegacyModal, type LegacyModalProps, LegacySelectDropdown, type LegacySelectDropdownProps, type LegacySelectOption, LegacySlider, type LegacySliderProps, LegacyStepper, type LegacyStepperProps, LegacyTable, type LegacyTableColumn, type LegacyTableEntry, type LegacyTableProps, LineGraph, type LineGraphData, type LineGraphLine, MenuBar, NotificationHub, type NotificationHubProps, Pagination, Popover, Progress, RadioGroup, type RadioGroupProps, Resizable, ScrollArea, SearchBar, type SearchBarProps, Select, Separator, Sheet, Slider, Spinner, SpinnerIcon, type Step, Switch, Table, Tabs, TextArea, type TextAreaProps, ThemeToggle, type ThemeToggleProps, Tooltip, badgeVariants, buttonVariants, labelVariants };

package/dist/components/index.js

@@ -1737,7 +1737,7 @@ var NumberRecordField = ({
   }
   return /* @__PURE__ */ jsxs25("div", { className: "space-y-4", children: [
     /* @__PURE__ */ jsx89(Heading, { variant: "h5", children: label }),
-    /* @__PURE__ */ jsx89("div", { className: "space-y-8", children: Object.keys(items).map((name) => {
+    /* @__PURE__ */ jsx89("div", { className: "space-y-6", children: Object.keys(items).map((name) => {
       const item = items[name];
       return /* @__PURE__ */ jsx89(
         NumberField,
@@ -2306,7 +2306,7 @@ var RecordArrayField = memo(function RecordArrayField2({
   setValue: setArrayValue,
   value: arrayValue
 }) {
-  const { t } = useTranslation4();
+  const { t } = useTranslation4("libui");
   const createNewRecord = () => Object.fromEntries(Object.keys(fieldset).map((fieldName) => [fieldName, void 0]));
   useEffect6(() => {
     setArrayValue([createNewRecord()]);
@@ -2324,7 +2324,7 @@ var RecordArrayField = memo(function RecordArrayField2({
   };
   return /* @__PURE__ */ jsxs38("div", { className: "space-y-4", children: [
     /* @__PURE__ */ jsx113(Heading, { variant: "h5", children: label }),
-    /* @__PURE__ */ jsx113("div", { className: "space-y-8", children: arrayValue.map((fields, i) => /* @__PURE__ */ jsxs38("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ jsx113("div", { className: "space-y-6", children: arrayValue.map((fields, i) => /* @__PURE__ */ jsxs38("div", { className: "space-y-4", children: [
       /* @__PURE__ */ jsx113(Label3, { className: "font-semibold italic", children: label + " " + (i + 1) }),
       Object.keys(fields).map((name) => {
         const field = fieldset[name];
@@ -2493,7 +2493,7 @@ var Form = ({
   validationSchema,
   ...props
 }) => {
-  const { t } = useTranslation5();
+  const { t } = useTranslation5("libui");
   const [rootError, setRootError] = useState5(null);
   const [errors, setErrors] = useState5({});
   const [values, setValues] = useState5(
@@ -2536,16 +2536,16 @@ var Form = ({
     "form",
     {
       autoComplete: "off",
-      className: twMerge("my-8 w-full", isGrouped ? "space-y-8 divide-y" : "space-y-8", className),
+      className: twMerge("w-full", isGrouped ? "space-y-8 divide-y" : "space-y-6", className),
       id,
       onSubmit: handleSubmit,
       ...props,
       children: [
         isGrouped ? content.map((fieldGroup, i) => {
-          return /* @__PURE__ */ jsxs39("div", { className: "space-y-8 [&:not(:first-child)]:pt-8", children: [
-            /* @__PURE__ */ jsxs39("div", { children: [
+          return /* @__PURE__ */ jsxs39("div", { className: "space-y-6 [&:not(:first-child)]:pt-8", children: [
+            /* @__PURE__ */ jsxs39("div", { className: "space-y-1", children: [
               /* @__PURE__ */ jsx116(Heading, { variant: "h4", children: fieldGroup.title }),
-              fieldGroup.description && /* @__PURE__ */ jsx116("small", { className: "text-sm italic text-muted-foreground", children: fieldGroup.description })
+              fieldGroup.description && /* @__PURE__ */ jsx116("p", { className: "text-sm italic leading-tight text-muted-foreground", children: fieldGroup.description })
             ] }),
             /* @__PURE__ */ jsx116(
               FieldsComponent,
@@ -2612,10 +2612,15 @@ var HoverCard = Object.assign(Root14, {
 import { LanguagesIcon } from "lucide-react";
 import { useTranslation as useTranslation6 } from "react-i18next";
 import { jsx as jsx118, jsxs as jsxs40 } from "react/jsx-runtime";
-var LanguageToggle = ({ align, options } = { align: "start", options: {} }) => {
-  const { i18n } = useTranslation6();
+var LanguageToggle = ({
+  align = "start",
+  options = {},
+  triggerClassName,
+  variant = "outline"
+}) => {
+  const { i18n } = useTranslation6("libui");
   return /* @__PURE__ */ jsxs40(DropdownMenu, { children: [
-    /* @__PURE__ */ jsx118(DropdownMenu.Trigger, { asChild: true, children: /* @__PURE__ */ jsx118(Button, { size: "icon", variant: "outline", children: /* @__PURE__ */ jsx118(LanguagesIcon, {}) }) }),
+    /* @__PURE__ */ jsx118(DropdownMenu.Trigger, { asChild: true, children: /* @__PURE__ */ jsx118(Button, { className: triggerClassName, size: "icon", variant, children: /* @__PURE__ */ jsx118(LanguagesIcon, {}) }) }),
     /* @__PURE__ */ jsx118(DropdownMenu.Content, { align, children: Object.keys(options).map((option) => /* @__PURE__ */ jsx118(DropdownMenu.Item, { onClick: () => void i18n.changeLanguage(option), children: options[option] }, option)) })
   ] });
 };
@@ -3051,7 +3056,7 @@ import { jsx as jsx126, jsxs as jsxs48 } from "react/jsx-runtime";
 var LegacyClientTable = ({ data, ...props }) => {
   const [currentPage, setCurrentPage] = useState7(1);
   const [entriesPerPage] = useState7(10);
-  const { t } = useTranslation7();
+  const { t } = useTranslation7("libui");
   const pageCount = Math.ceil(data.length / entriesPerPage);
   const firstEntry = data.length === 0 ? 0 : (currentPage - 1) * entriesPerPage + 1;
   const lastEntry = Math.min(firstEntry + entriesPerPage - 1, data.length);
@@ -3059,7 +3064,7 @@ var LegacyClientTable = ({ data, ...props }) => {
   return /* @__PURE__ */ jsxs48("div", { children: [
     /* @__PURE__ */ jsx126(LegacyTable, { data: currentEntries, ...props }),
     /* @__PURE__ */ jsxs48("div", { className: "flex items-center justify-between px-1 py-3", children: [
-      /* @__PURE__ */ jsx126("div", { className: "hidden sm:block", children: /* @__PURE__ */ jsx126("p", { className: "text-sm font-medium text-muted-foreground", children: t("table.pagination.info", {
+      /* @__PURE__ */ jsx126("div", { className: "hidden sm:block", children: /* @__PURE__ */ jsx126("p", { className: "text-sm font-medium text-muted-foreground", children: t("pagination.info", {
         first: firstEntry,
         last: lastEntry,
         total: data.length
@@ -3073,7 +3078,7 @@ var LegacyClientTable = ({ data, ...props }) => {
             onClick: () => {
               setCurrentPage(currentPage - 1);
             },
-            children: t("table.pagination.previous")
+            children: t("pagination.previous")
           }
         ),
         /* @__PURE__ */ jsx126(
@@ -3084,7 +3089,7 @@ var LegacyClientTable = ({ data, ...props }) => {
             onClick: () => {
               setCurrentPage(currentPage + 1);
             },
-            children: t("table.pagination.next")
+            children: t("pagination.next")
           }
         )
       ] })
@@ -3135,7 +3140,7 @@ function LineGraphComponent({
   lines,
   xAxis
 }) {
-  const { i18n } = useTranslation8();
+  const { i18n } = useTranslation8("libui");
   const [theme] = useTheme();
   return /* @__PURE__ */ jsx127(ResponsiveContainer, { height: 400, width: "100%", children: /* @__PURE__ */ jsxs49(LineChart, { data: [...data], margin: { bottom: 5, left: 15, right: 15, top: 5 }, children: [
     /* @__PURE__ */ jsx127(CartesianGrid, { stroke: "#64748b", strokeDasharray: "5 5" }),
@@ -3432,7 +3437,7 @@ var NotificationIcon = ({ type }) => {
 // src/components/NotificationHub/NotificationHub.tsx
 import { jsx as jsx140, jsxs as jsxs53 } from "react/jsx-runtime";
 var NotificationHub = ({ timeout = 5e3 }) => {
-  const { t } = useTranslation9();
+  const { t } = useTranslation9("libui");
   const { dismissNotification, notifications } = useNotificationsStore();
   return /* @__PURE__ */ jsx140("div", { className: "fixed bottom-0 z-50 w-full print:hidden", children: /* @__PURE__ */ jsx140(AnimatePresence3, { children: notifications.map((item) => /* @__PURE__ */ jsx140(
     motion3.div,
@@ -3630,8 +3635,8 @@ var Resizable = Object.assign(ResizableRoot, {
 import { SearchIcon as SearchIcon2 } from "lucide-react";
 import { useTranslation as useTranslation12 } from "react-i18next";
 import { jsx as jsx152, jsxs as jsxs57 } from "react/jsx-runtime";
-var SearchBar = ({ className, onValueChange, placeholder, value }) => {
-  const { t } = useTranslation12();
+var SearchBar = ({ className, onClick, onValueChange, placeholder, value }) => {
+  const { t } = useTranslation12("libui");
   return /* @__PURE__ */ jsxs57("form", { className: cn("relative", className), children: [
     /* @__PURE__ */ jsx152(SearchIcon2, { className: "absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" }),
     /* @__PURE__ */ jsx152(
@@ -3643,7 +3648,8 @@ var SearchBar = ({ className, onValueChange, placeholder, value }) => {
         value,
         onChange: (event) => {
           onValueChange?.(event.target.value);
-        }
+        },
+        onClick: () => onClick?.()
       }
     )
   ] });
@@ -4003,15 +4009,27 @@ var Tabs = Object.assign(TabsPrimitive4.Root, {
 // src/components/ThemeToggle/ThemeToggle.tsx
 import { MoonIcon, SunIcon } from "lucide-react";
 import { jsx as jsx174, jsxs as jsxs59 } from "react/jsx-runtime";
-var ThemeToggle = () => {
+var ThemeToggle = ({ onClick, variant = "outline", ...props }) => {
   const [theme, setTheme] = useTheme();
   const toggleTheme = () => {
     setTheme(theme === "dark" ? "light" : "dark");
   };
-  return /* @__PURE__ */ jsxs59(Button, { size: "icon", variant: "outline", onClick: toggleTheme, children: [
-    /* @__PURE__ */ jsx174(SunIcon, { className: "rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" }),
-    /* @__PURE__ */ jsx174(MoonIcon, { className: "absolute rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" })
-  ] });
+  return /* @__PURE__ */ jsxs59(
+    Button,
+    {
+      size: "icon",
+      variant,
+      onClick: (event) => {
+        toggleTheme();
+        onClick?.(event);
+      },
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx174(SunIcon, { className: "rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" }),
+        /* @__PURE__ */ jsx174(MoonIcon, { className: "absolute rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" })
+      ]
+    }
+  );
 };
 
 // src/components/Tooltip/TooltipContent.tsx