@trsys-tech/matrix-library 0.3.2 → 0.3.4

package/dist/datagrid.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"datagrid.es.js","sources":["../src/components/data-grid/DataGrid.tsx"],"sourcesContent":["import React, { HTMLAttributes } from \"react\";\r\nimport { AgGridReact, AgGridReactProps } from \"ag-grid-react\";\r\nimport { GridApi, GridReadyEvent, themeQuartz } from \"ag-grid-community\";\r\nimport { CircleXmark, ElipsisVertical, Magnifier, Print, Refresh, Snowflake, Trashcan } from \"@trsys-tech/matrix-icons\";\r\n\r\nimport { cn } from \"../../lib/utils\";\r\nimport { printHtml } from \"../../lib/printHtml\";\r\nimport { TextField } from \"../text-field/TextField\";\r\nimport { Button, ButtonProps } from \"../button/Button\";\r\nimport { IconButton, IconButtonProps } from \"../icon-botton/IconButton\";\r\nimport { Popover, PopoverContent, PopoverContentProps, PopoverProps, PopoverTrigger, PopoverTriggerProps } from \"../popover/Popover\";\r\n\r\nconst appTheme = themeQuartz.withParams({\r\n  fontFamily: \"DMSans\",\r\n  fontSize: \"12px\",\r\n  headerFontSize: \"12px\",\r\n  headerFontWeight: 700,\r\n});\r\n\r\ntype DataGridContext = {\r\n  api: GridApi | null;\r\n  setApi: (value: GridApi) => void;\r\n  rowData: any[] | null | undefined;\r\n  setRowData: (value: any[] | null | undefined) => void;\r\n  gridId: string;\r\n  quickFilterText: string;\r\n  setQuickFilterText: (value: string) => void;\r\n  actionbarExists: boolean;\r\n  setActionbarExists: (value: boolean) => void;\r\n  actionbarHeight: number;\r\n  setActionbarHeight: (value: number) => void;\r\n};\r\n\r\nconst DataGridContext = React.createContext<DataGridContext | null>(null);\r\n\r\nconst useDataGrid = () => {\r\n  const context = React.useContext(DataGridContext);\r\n\r\n  if (!context) {\r\n    throw new Error(\"useDataGrid should be used within <DataGrid>\");\r\n  }\r\n\r\n  return context;\r\n};\r\n\r\ntype DataGridProps = {\r\n  children: React.ReactNode;\r\n};\r\n\r\nconst DataGrid: React.FC<DataGridProps> = ({ children }) => {\r\n  const gridId = React.useId();\r\n  const [api, setApi] = React.useState<GridApi | null>(null);\r\n  const [rowData, setRowData] = React.useState<any[] | null | undefined>([]);\r\n  const [actionbarHeight, setActionbarHeight] = React.useState(0);\r\n\r\n  const [quickFilterText, setQuickFilterText] = React.useState(\"\");\r\n  const [actionbarExists, setActionbarExists] = React.useState(false);\r\n  return (\r\n    <DataGridContext.Provider\r\n      value={{\r\n        api,\r\n        setApi,\r\n        rowData,\r\n        setRowData,\r\n        gridId,\r\n        quickFilterText,\r\n        setQuickFilterText,\r\n        actionbarExists,\r\n        setActionbarExists,\r\n        actionbarHeight,\r\n        setActionbarHeight,\r\n      }}\r\n    >\r\n      {children}\r\n    </DataGridContext.Provider>\r\n  );\r\n};\r\n\r\ntype DataGridContentProps = AgGridReactProps & {};\r\n\r\nconst DataGridContent: React.FC<DataGridContentProps> = ({\r\n  theme: propTheme,\r\n  onGridReady,\r\n  quickFilterText: quickFilterTextProps,\r\n  rowData: rowDataProps,\r\n  containerStyle,\r\n  ...props\r\n}) => {\r\n  const context = React.useContext(DataGridContext);\r\n\r\n  if (!context) {\r\n    throw new Error(\"DataGridContent should be used within <DataGrid>\");\r\n  }\r\n  const { rowData, setRowData, actionbarExists, setApi, setQuickFilterText, quickFilterText, gridId, actionbarHeight } = context;\r\n\r\n  const theme = appTheme.withParams({\r\n    headerHeight: 40,\r\n    wrapperBorderRadius: actionbarExists ? \"0px 0px 8px 8px\" : \"8px\",\r\n  });\r\n\r\n  const handleGridReady = (e: GridReadyEvent) => {\r\n    setApi(e.api);\r\n    onGridReady?.(e);\r\n  };\r\n\r\n  React.useEffect(() => {\r\n    setRowData(rowDataProps);\r\n  }, [rowDataProps, setRowData]);\r\n\r\n  React.useEffect(() => {\r\n    if (quickFilterTextProps !== undefined) {\r\n      setQuickFilterText(quickFilterTextProps ?? \"\");\r\n    }\r\n  }, [quickFilterTextProps, setQuickFilterText]);\r\n\r\n  return (\r\n    <AgGridReact\r\n      gridId={gridId}\r\n      theme={propTheme ?? theme}\r\n      rowData={rowData}\r\n      quickFilterText={quickFilterText}\r\n      onGridReady={handleGridReady}\r\n      containerStyle={{ height: `calc(100% - ${actionbarHeight}px)`, ...containerStyle }}\r\n      {...props}\r\n    />\r\n  );\r\n};\r\n\r\ntype DatagridActionBarProps = HTMLAttributes<HTMLDivElement> & {};\r\n\r\nconst DataGridActionBar: React.FC<DatagridActionBarProps> = ({ className, ...props }) => {\r\n  const context = React.useContext(DataGridContext);\r\n\r\n  if (!context) {\r\n    throw new Error(\"DataGridActionBar should be used within <DataGrid>\");\r\n  }\r\n  const ref = React.useRef<HTMLDivElement | null>(null);\r\n  const { setActionbarExists, setActionbarHeight } = context;\r\n  const { children } = props;\r\n\r\n  React.useEffect(() => {\r\n    setActionbarExists(true);\r\n    return () => setActionbarExists(false);\r\n  }, [setActionbarExists]);\r\n\r\n  React.useEffect(() => {\r\n    if (ref.current) {\r\n      setActionbarHeight(ref.current.clientHeight);\r\n    }\r\n  }, [setActionbarHeight]);\r\n\r\n  return (\r\n    <div\r\n      className={cn(\r\n        \"relative flex items-center p-2 h-12 w-full bg-gray-0 border border-gray-200 border-b-0 -mb-[1px] z-10 rounded-t-[8px]\",\r\n        className,\r\n      )}\r\n      ref={ref}\r\n    >\r\n      {children}\r\n    </div>\r\n  );\r\n};\r\n\r\ntype SearchActionProps = {\r\n  defaultOpen?: boolean;\r\n};\r\n\r\nconst SearchAction: React.FC<SearchActionProps> = ({ defaultOpen = false }) => {\r\n  const context = React.useContext(DataGridContext);\r\n\r\n  if (!context) {\r\n    throw new Error(\"SearchAction should be used within <DataGrid>\");\r\n  }\r\n\r\n  const { quickFilterText, setQuickFilterText } = context;\r\n\r\n  const [isSearchInputOpen, setIsSearchInputOpen] = React.useState(defaultOpen);\r\n  const [isClosing, setIsClosing] = React.useState(false);\r\n  const inputRef = React.useRef<HTMLInputElement | null>(null);\r\n\r\n  const handleClear = () => {\r\n    context.setQuickFilterText(\"\");\r\n    if (inputRef.current) {\r\n      inputRef.current.focus();\r\n    }\r\n  };\r\n\r\n  const handleOpen = () => {\r\n    setIsSearchInputOpen(true);\r\n  };\r\n\r\n  React.useEffect(() => {\r\n    if (isSearchInputOpen && inputRef?.current) {\r\n      inputRef.current.focus();\r\n    }\r\n  }, [isSearchInputOpen]);\r\n\r\n  const handleClose = () => {\r\n    setIsClosing(true);\r\n    context.setQuickFilterText(\"\");\r\n    setTimeout(() => {\r\n      setIsSearchInputOpen(false);\r\n      setIsClosing(false);\r\n    }, 200);\r\n  };\r\n\r\n  return (\r\n    <div className=\"max-w-60\">\r\n      {isSearchInputOpen || isClosing ? (\r\n        <TextField\r\n          ref={inputRef}\r\n          className={cn(\"relative h-7.5\", isSearchInputOpen && !isClosing ? \"animate-input-open\" : \"\", isClosing && \"animate-input-close\")}\r\n          onChange={e => setQuickFilterText(e.target.value)}\r\n          value={quickFilterText}\r\n          startButton={\r\n            <IconButton variant=\"toolbar\" className=\"p-0.5 h-6 w-6 border-none mx-1\" onClick={handleClose}>\r\n              <Magnifier className=\"w-5 h-5\" />\r\n            </IconButton>\r\n          }\r\n          endButton={\r\n            quickFilterText && (\r\n              <IconButton variant=\"toolbar\" className=\"p-0.5 w-6 h-6 border-none mx-1\" onClick={handleClear}>\r\n                <CircleXmark className=\"w-5 h-5\" />\r\n              </IconButton>\r\n            )\r\n          }\r\n        />\r\n      ) : (\r\n        <IconButton variant=\"toolbar\" className=\"p-0.5 w-6 h-6 m-1\" onClick={handleOpen}>\r\n          <Magnifier className=\"w-5 h-5\" />\r\n        </IconButton>\r\n      )}\r\n    </div>\r\n  );\r\n};\r\n\r\ntype FreezeActionProps = ButtonProps & {\r\n  freezeText?: string;\r\n  unFreezeText?: string;\r\n};\r\n\r\nconst FreezeAction: React.FC<FreezeActionProps> = ({ freezeText, unFreezeText, onClick, disabled, ...props }) => {\r\n  const context = React.useContext(DataGridContext);\r\n\r\n  if (!context) {\r\n    throw new Error(\"FreezeAction should be used within <DataGrid>\");\r\n  }\r\n\r\n  const [pinnedRowCount, setPinnedRowCount] = React.useState(0);\r\n  const [selectedRowsCount, setSelectedRowsCount] = React.useState(0);\r\n\r\n  const { api, rowData } = context;\r\n\r\n  const freezeRows = () => {\r\n    if (!api) return;\r\n\r\n    // Get currently selected rows\r\n    const selectedRows = api.getSelectedNodes();\r\n\r\n    if (selectedRows.length > 0) {\r\n      // Pin the selected rows\r\n      api.setGridOption(\r\n        \"pinnedTopRowData\",\r\n        selectedRows.map(row => row.data),\r\n      );\r\n\r\n      // Get current row data\r\n      const allData = api.getRenderedNodes();\r\n      // Filter out pinned rows from the main data\r\n      const updatedNodes = allData.filter(row => !selectedRows.some(pinnedRow => pinnedRow.id === row.id));\r\n\r\n      // Update the grid with the filtered data\r\n      api.setGridOption(\r\n        \"rowData\",\r\n        updatedNodes.map(node => node.data),\r\n      );\r\n    }\r\n  };\r\n\r\n  const unfreezeRows = () => {\r\n    if (!api) return;\r\n    api.setGridOption(\"pinnedTopRowData\", []);\r\n    api.setGridOption(\"rowData\", rowData);\r\n  };\r\n\r\n  const handleFreezing = (e: React.MouseEvent<HTMLButtonElement>) => {\r\n    if (api) {\r\n      const pinnedRowsCount = api.getPinnedTopRowCount();\r\n      if (pinnedRowsCount > 0) {\r\n        unfreezeRows();\r\n      } else {\r\n        freezeRows();\r\n      }\r\n    }\r\n    onClick?.(e);\r\n  };\r\n\r\n  React.useEffect(() => {\r\n    api?.addEventListener(\"pinnedRowDataChanged\", () => {\r\n      setPinnedRowCount(api.getPinnedTopRowCount());\r\n    });\r\n\r\n    api?.addEventListener(\"selectionChanged\", () => {\r\n      setSelectedRowsCount(api.getSelectedNodes().length);\r\n    });\r\n\r\n    return () => {\r\n      api?.removeEventListener(\"pinnedRowDataChanged\", () => {\r\n        setPinnedRowCount(api.getPinnedTopRowCount());\r\n      });\r\n\r\n      api?.removeEventListener(\"selectionChanged\", () => {\r\n        setSelectedRowsCount(api.getSelectedNodes().length);\r\n      });\r\n    };\r\n  }, [api]);\r\n\r\n  return (\r\n    <Button\r\n      variant=\"text\"\r\n      onClick={handleFreezing}\r\n      startIcon={<Snowflake className=\"w-4.5 h-4.5\" />}\r\n      disabled={(!pinnedRowCount && !selectedRowsCount) || disabled}\r\n      {...props}\r\n    >\r\n      {pinnedRowCount ? (unFreezeText ?? \"Unfreeze\") : (freezeText ?? \"Freeze\")}\r\n    </Button>\r\n  );\r\n};\r\n\r\ntype PrintActionProps = IconButtonProps & {};\r\n\r\nconst PrintAction: React.FC<PrintActionProps> = ({ children, className, onClick, ...props }) => {\r\n  const context = React.useContext(DataGridContext);\r\n\r\n  if (!context) {\r\n    throw new Error(\"PrintAction should be used within <DataGrid>\");\r\n  }\r\n\r\n  const handlePrint = (e: React.MouseEvent<HTMLButtonElement>) => {\r\n    if (context.api) {\r\n      context.api.setGridOption(\"domLayout\", \"print\");\r\n\r\n      setTimeout(() => {\r\n        const element = document.querySelector(\"[grid-id='\" + context.gridId + \"']\") as HTMLElement;\r\n        const header = document.head;\r\n        const html = `<html>\r\n        ${header.innerHTML}\r\n        ${element.outerHTML}\r\n        </html>`;\r\n        printHtml(html);\r\n        context?.api?.setGridOption(\"domLayout\", undefined);\r\n      });\r\n    }\r\n    onClick?.(e);\r\n  };\r\n\r\n  return (\r\n    <IconButton variant=\"toolbar\" className={cn(\"p-0.5 w-6 h-6\", className)} onClick={handlePrint} {...props}>\r\n      {children ?? <Print className=\"w-5 h-5\" />}\r\n    </IconButton>\r\n  );\r\n};\r\n\r\ntype RefreshActionProps = Omit<IconButtonProps, \"onClick\"> & {\r\n  refreshRowData: () => void;\r\n};\r\n\r\nconst RefreshAction: React.FC<RefreshActionProps> = ({ className, refreshRowData, children, loading, ...props }) => {\r\n  const context = React.useContext(DataGridContext);\r\n\r\n  if (!context) {\r\n    throw new Error(\"RefreshAction should be used within <DataGrid>\");\r\n  }\r\n\r\n  const handleRefresh = () => {\r\n    refreshRowData();\r\n  };\r\n\r\n  return (\r\n    <IconButton\r\n      className={cn(\"p-0.5 w-6 h-6\", loading && \"disabled:bg-transparent\", className)}\r\n      variant=\"toolbar\"\r\n      onClick={handleRefresh}\r\n      disabled={loading}\r\n      {...props}\r\n    >\r\n      {children ?? <Refresh className={cn(\"w-4.5 h-4.5\", loading && \"animate-spin\")} />}\r\n    </IconButton>\r\n  );\r\n};\r\n\r\ntype DeleteActionProps = Omit<ButtonProps, \"onClick\"> & {\r\n  onDelete: () => void;\r\n};\r\n\r\nconst DeleteAction: React.FC<DeleteActionProps> = ({ onDelete, children, ...props }) => {\r\n  const handleDelete = () => {\r\n    onDelete();\r\n  };\r\n\r\n  return (\r\n    <Button variant=\"danger\" onClick={handleDelete} startIcon={<Trashcan className=\"w-4.5 h-4.5\" />} {...props}>\r\n      {children}\r\n    </Button>\r\n  );\r\n};\r\n\r\ntype ExtraActionsProps = PopoverContentProps & {\r\n  children: React.ReactNode;\r\n  slotProps?: {\r\n    triggerProps?: PopoverTriggerProps;\r\n    popoverProps?: PopoverProps;\r\n  };\r\n};\r\n\r\nconst ExtraActions: React.FC<ExtraActionsProps> = ({ children, slotProps, className, ...props }) => {\r\n  return (\r\n    <Popover {...(slotProps?.popoverProps ?? {})}>\r\n      <PopoverTrigger {...(slotProps?.triggerProps ?? {})}>\r\n        <ElipsisVertical className=\"w-4.5 h-4.5 text-primary\" />\r\n      </PopoverTrigger>\r\n      <PopoverContent align=\"end\" className={cn(\"w-40\", className)} {...props}>\r\n        {children}\r\n      </PopoverContent>\r\n    </Popover>\r\n  );\r\n};\r\n\r\nexport {\r\n  DataGrid,\r\n  DataGridContent,\r\n  DataGridActionBar,\r\n  SearchAction,\r\n  FreezeAction,\r\n  PrintAction,\r\n  RefreshAction,\r\n  ExtraActions,\r\n  DeleteAction,\r\n  type DataGridProps,\r\n  type DataGridContentProps,\r\n  type DatagridActionBarProps,\r\n  type SearchActionProps,\r\n  type FreezeActionProps,\r\n  type RefreshActionProps,\r\n  type ExtraActionsProps,\r\n  type DeleteActionProps,\r\n  useDataGrid,\r\n};\r\n"],"names":["appTheme","themeQuartz","DataGridContext","React","useDataGrid","context","DataGrid","children","gridId","api","setApi","rowData","setRowData","actionbarHeight","setActionbarHeight","quickFilterText","setQuickFilterText","actionbarExists","setActionbarExists","jsx","DataGridContent","propTheme","onGridReady","quickFilterTextProps","rowDataProps","containerStyle","props","theme","handleGridReady","e","AgGridReact","DataGridActionBar","className","ref","cn","SearchAction","defaultOpen","isSearchInputOpen","setIsSearchInputOpen","isClosing","setIsClosing","inputRef","handleClear","handleOpen","handleClose","TextField","IconButton","Magnifier","CircleXmark","FreezeAction","freezeText","unFreezeText","onClick","disabled","pinnedRowCount","setPinnedRowCount","selectedRowsCount","setSelectedRowsCount","freezeRows","selectedRows","row","updatedNodes","pinnedRow","node","unfreezeRows","handleFreezing","Button","Snowflake","PrintAction","handlePrint","element","html","printHtml","Print","RefreshAction","refreshRowData","loading","handleRefresh","Refresh","DeleteAction","onDelete","Trashcan","ExtraActions","slotProps","Popover","PopoverTrigger","ElipsisVertical","PopoverContent"],"mappings":"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"}
+{"version":3,"file":"datagrid.es.js","sources":["../src/components/data-grid/DataGrid.tsx"],"sourcesContent":["import React, { HTMLAttributes } from \"react\";\r\nimport { AgGridReact, AgGridReactProps } from \"ag-grid-react\";\r\nimport { GridApi, GridReadyEvent, themeQuartz } from \"ag-grid-community\";\r\nimport { CircleXmark, ElipsisVertical, Magnifier, Print, Refresh, Snowflake, Trashcan } from \"@trsys-tech/matrix-icons\";\r\n\r\nimport { cn } from \"../../lib/utils\";\r\nimport { printHtml } from \"../../lib/printHtml\";\r\nimport { TextField } from \"../text-field/TextField\";\r\nimport { Button, ButtonProps } from \"../button/Button\";\r\nimport { IconButton, IconButtonProps } from \"../icon-botton/IconButton\";\r\nimport { Popover, PopoverContent, PopoverContentProps, PopoverProps, PopoverTrigger, PopoverTriggerProps } from \"../popover/Popover\";\r\n\r\nconst appTheme = themeQuartz.withParams({\r\n  fontFamily: \"DMSans\",\r\n  fontSize: \"12px\",\r\n  headerFontSize: \"12px\",\r\n  headerFontWeight: 700,\r\n});\r\n\r\ntype DataGridContext = {\r\n  api: GridApi | null;\r\n  setApi: (value: GridApi) => void;\r\n  rowData: any[] | null | undefined;\r\n  setRowData: (value: any[] | null | undefined) => void;\r\n  gridId: string;\r\n  quickFilterText: string;\r\n  setQuickFilterText: (value: string) => void;\r\n  actionbarExists: boolean;\r\n  setActionbarExists: (value: boolean) => void;\r\n  actionbarHeight: number;\r\n  setActionbarHeight: (value: number) => void;\r\n};\r\n\r\nconst DataGridContext = React.createContext<DataGridContext | null>(null);\r\n\r\nconst useDataGrid = () => {\r\n  const context = React.useContext(DataGridContext);\r\n\r\n  if (!context) {\r\n    throw new Error(\"useDataGrid should be used within <DataGrid>\");\r\n  }\r\n\r\n  return context;\r\n};\r\n\r\ntype DataGridProps = {\r\n  children: React.ReactNode;\r\n};\r\n\r\nconst DataGrid: React.FC<DataGridProps> = ({ children }) => {\r\n  const gridId = React.useId();\r\n  const [api, setApi] = React.useState<GridApi | null>(null);\r\n  const [rowData, setRowData] = React.useState<any[] | null | undefined>([]);\r\n  const [actionbarHeight, setActionbarHeight] = React.useState(0);\r\n\r\n  const [quickFilterText, setQuickFilterText] = React.useState(\"\");\r\n  const [actionbarExists, setActionbarExists] = React.useState(false);\r\n  return (\r\n    <DataGridContext.Provider\r\n      value={{\r\n        api,\r\n        setApi,\r\n        rowData,\r\n        setRowData,\r\n        gridId,\r\n        quickFilterText,\r\n        setQuickFilterText,\r\n        actionbarExists,\r\n        setActionbarExists,\r\n        actionbarHeight,\r\n        setActionbarHeight,\r\n      }}\r\n    >\r\n      {children}\r\n    </DataGridContext.Provider>\r\n  );\r\n};\r\n\r\ntype DataGridContentProps = AgGridReactProps & {};\r\n\r\nconst DataGridContent: React.FC<DataGridContentProps> = ({\r\n  theme: propTheme,\r\n  onGridReady,\r\n  quickFilterText: quickFilterTextProps,\r\n  rowData: rowDataProps,\r\n  containerStyle,\r\n  ...props\r\n}) => {\r\n  const context = React.useContext(DataGridContext);\r\n\r\n  if (!context) {\r\n    throw new Error(\"DataGridContent should be used within <DataGrid>\");\r\n  }\r\n  const { rowData, setRowData, actionbarExists, setApi, setQuickFilterText, quickFilterText, gridId, actionbarHeight } = context;\r\n\r\n  const theme = appTheme.withParams({\r\n    headerHeight: 40,\r\n    wrapperBorderRadius: actionbarExists ? \"0px 0px 8px 8px\" : \"8px\",\r\n  });\r\n\r\n  const handleGridReady = (e: GridReadyEvent) => {\r\n    setApi(e.api);\r\n    onGridReady?.(e);\r\n  };\r\n\r\n  React.useEffect(() => {\r\n    setRowData(rowDataProps);\r\n  }, [rowDataProps, setRowData]);\r\n\r\n  React.useEffect(() => {\r\n    if (quickFilterTextProps !== undefined) {\r\n      setQuickFilterText(quickFilterTextProps ?? \"\");\r\n    }\r\n  }, [quickFilterTextProps, setQuickFilterText]);\r\n\r\n  return (\r\n    <AgGridReact\r\n      gridId={gridId}\r\n      theme={propTheme ?? theme}\r\n      rowData={rowData}\r\n      quickFilterText={quickFilterText}\r\n      onGridReady={handleGridReady}\r\n      containerStyle={{ height: `calc(100% - ${actionbarHeight}px)`, ...containerStyle }}\r\n      {...props}\r\n    />\r\n  );\r\n};\r\n\r\ntype DatagridActionBarProps = HTMLAttributes<HTMLDivElement> & {};\r\n\r\nconst DataGridActionBar: React.FC<DatagridActionBarProps> = ({ className, ...props }) => {\r\n  const context = React.useContext(DataGridContext);\r\n\r\n  if (!context) {\r\n    throw new Error(\"DataGridActionBar should be used within <DataGrid>\");\r\n  }\r\n  const ref = React.useRef<HTMLDivElement | null>(null);\r\n  const { setActionbarExists, setActionbarHeight } = context;\r\n  const { children } = props;\r\n\r\n  React.useEffect(() => {\r\n    setActionbarExists(true);\r\n    return () => setActionbarExists(false);\r\n  }, [setActionbarExists]);\r\n\r\n  React.useEffect(() => {\r\n    if (ref.current) {\r\n      setActionbarHeight(ref.current.clientHeight);\r\n    }\r\n  }, [setActionbarHeight]);\r\n\r\n  return (\r\n    <div\r\n      className={cn(\r\n        \"relative flex items-center p-2 h-12 w-full bg-gray-0 border border-gray-200 border-b-0 -mb-[1px] z-10 rounded-t-[8px]\",\r\n        className,\r\n      )}\r\n      ref={ref}\r\n    >\r\n      {children}\r\n    </div>\r\n  );\r\n};\r\n\r\ntype SearchActionProps = {\r\n  defaultOpen?: boolean;\r\n};\r\n\r\nconst SearchAction: React.FC<SearchActionProps> = ({ defaultOpen = false }) => {\r\n  const context = React.useContext(DataGridContext);\r\n\r\n  if (!context) {\r\n    throw new Error(\"SearchAction should be used within <DataGrid>\");\r\n  }\r\n\r\n  const { quickFilterText, setQuickFilterText } = context;\r\n\r\n  const [isSearchInputOpen, setIsSearchInputOpen] = React.useState(defaultOpen);\r\n  const [isClosing, setIsClosing] = React.useState(false);\r\n  const inputRef = React.useRef<HTMLInputElement | null>(null);\r\n\r\n  const handleClear = () => {\r\n    context.setQuickFilterText(\"\");\r\n    if (inputRef.current) {\r\n      inputRef.current.focus();\r\n    }\r\n  };\r\n\r\n  const handleOpen = () => {\r\n    setIsSearchInputOpen(true);\r\n  };\r\n\r\n  React.useEffect(() => {\r\n    if (isSearchInputOpen && inputRef?.current) {\r\n      inputRef.current.focus();\r\n    }\r\n  }, [isSearchInputOpen]);\r\n\r\n  const handleClose = () => {\r\n    setIsClosing(true);\r\n    context.setQuickFilterText(\"\");\r\n    setTimeout(() => {\r\n      setIsSearchInputOpen(false);\r\n      setIsClosing(false);\r\n    }, 200);\r\n  };\r\n\r\n  return (\r\n    <div className=\"max-w-60\">\r\n      {isSearchInputOpen || isClosing ? (\r\n        <TextField\r\n          ref={inputRef}\r\n          className={cn(\"relative h-7.5\", isSearchInputOpen && !isClosing ? \"animate-input-open\" : \"\", isClosing && \"animate-input-close\")}\r\n          onChange={e => setQuickFilterText(e.target.value)}\r\n          value={quickFilterText}\r\n          startAdornment={\r\n            <IconButton variant=\"toolbar\" className=\"p-0.5 h-6 w-6 border-none mx-1\" onClick={handleClose}>\r\n              <Magnifier className=\"w-5 h-5\" />\r\n            </IconButton>\r\n          }\r\n          endAdornment={\r\n            quickFilterText && (\r\n              <IconButton variant=\"toolbar\" className=\"p-0.5 w-6 h-6 border-none mx-1\" onClick={handleClear}>\r\n                <CircleXmark className=\"w-5 h-5\" />\r\n              </IconButton>\r\n            )\r\n          }\r\n        />\r\n      ) : (\r\n        <IconButton variant=\"toolbar\" className=\"p-0.5 w-6 h-6 m-1\" onClick={handleOpen}>\r\n          <Magnifier className=\"w-5 h-5\" />\r\n        </IconButton>\r\n      )}\r\n    </div>\r\n  );\r\n};\r\n\r\ntype FreezeActionProps = ButtonProps & {\r\n  freezeText?: string;\r\n  unFreezeText?: string;\r\n};\r\n\r\nconst FreezeAction: React.FC<FreezeActionProps> = ({ freezeText, unFreezeText, onClick, disabled, ...props }) => {\r\n  const context = React.useContext(DataGridContext);\r\n\r\n  if (!context) {\r\n    throw new Error(\"FreezeAction should be used within <DataGrid>\");\r\n  }\r\n\r\n  const [pinnedRowCount, setPinnedRowCount] = React.useState(0);\r\n  const [selectedRowsCount, setSelectedRowsCount] = React.useState(0);\r\n\r\n  const { api, rowData } = context;\r\n\r\n  const freezeRows = () => {\r\n    if (!api) return;\r\n\r\n    // Get currently selected rows\r\n    const selectedRows = api.getSelectedNodes();\r\n\r\n    if (selectedRows.length > 0) {\r\n      // Pin the selected rows\r\n      api.setGridOption(\r\n        \"pinnedTopRowData\",\r\n        selectedRows.map(row => row.data),\r\n      );\r\n\r\n      // Get current row data\r\n      const allData = api.getRenderedNodes();\r\n      // Filter out pinned rows from the main data\r\n      const updatedNodes = allData.filter(row => !selectedRows.some(pinnedRow => pinnedRow.id === row.id));\r\n\r\n      // Update the grid with the filtered data\r\n      api.setGridOption(\r\n        \"rowData\",\r\n        updatedNodes.map(node => node.data),\r\n      );\r\n    }\r\n  };\r\n\r\n  const unfreezeRows = () => {\r\n    if (!api) return;\r\n    api.setGridOption(\"pinnedTopRowData\", []);\r\n    api.setGridOption(\"rowData\", rowData);\r\n  };\r\n\r\n  const handleFreezing = (e: React.MouseEvent<HTMLButtonElement>) => {\r\n    if (api) {\r\n      const pinnedRowsCount = api.getPinnedTopRowCount();\r\n      if (pinnedRowsCount > 0) {\r\n        unfreezeRows();\r\n      } else {\r\n        freezeRows();\r\n      }\r\n    }\r\n    onClick?.(e);\r\n  };\r\n\r\n  React.useEffect(() => {\r\n    api?.addEventListener(\"pinnedRowDataChanged\", () => {\r\n      setPinnedRowCount(api.getPinnedTopRowCount());\r\n    });\r\n\r\n    api?.addEventListener(\"selectionChanged\", () => {\r\n      setSelectedRowsCount(api.getSelectedNodes().length);\r\n    });\r\n\r\n    return () => {\r\n      api?.removeEventListener(\"pinnedRowDataChanged\", () => {\r\n        setPinnedRowCount(api.getPinnedTopRowCount());\r\n      });\r\n\r\n      api?.removeEventListener(\"selectionChanged\", () => {\r\n        setSelectedRowsCount(api.getSelectedNodes().length);\r\n      });\r\n    };\r\n  }, [api]);\r\n\r\n  return (\r\n    <Button\r\n      variant=\"text\"\r\n      onClick={handleFreezing}\r\n      startIcon={<Snowflake className=\"w-4.5 h-4.5\" />}\r\n      disabled={(!pinnedRowCount && !selectedRowsCount) || disabled}\r\n      {...props}\r\n    >\r\n      {pinnedRowCount ? (unFreezeText ?? \"Unfreeze\") : (freezeText ?? \"Freeze\")}\r\n    </Button>\r\n  );\r\n};\r\n\r\ntype PrintActionProps = IconButtonProps & {};\r\n\r\nconst PrintAction: React.FC<PrintActionProps> = ({ children, className, onClick, ...props }) => {\r\n  const context = React.useContext(DataGridContext);\r\n\r\n  if (!context) {\r\n    throw new Error(\"PrintAction should be used within <DataGrid>\");\r\n  }\r\n\r\n  const handlePrint = (e: React.MouseEvent<HTMLButtonElement>) => {\r\n    if (context.api) {\r\n      context.api.setGridOption(\"domLayout\", \"print\");\r\n\r\n      setTimeout(() => {\r\n        const element = document.querySelector(\"[grid-id='\" + context.gridId + \"']\") as HTMLElement;\r\n        const header = document.head;\r\n        const html = `<html>\r\n        ${header.innerHTML}\r\n        ${element.outerHTML}\r\n        </html>`;\r\n        printHtml(html);\r\n        context?.api?.setGridOption(\"domLayout\", undefined);\r\n      });\r\n    }\r\n    onClick?.(e);\r\n  };\r\n\r\n  return (\r\n    <IconButton variant=\"toolbar\" className={cn(\"p-0.5 w-6 h-6\", className)} onClick={handlePrint} {...props}>\r\n      {children ?? <Print className=\"w-5 h-5\" />}\r\n    </IconButton>\r\n  );\r\n};\r\n\r\ntype RefreshActionProps = Omit<IconButtonProps, \"onClick\"> & {\r\n  refreshRowData: () => void;\r\n};\r\n\r\nconst RefreshAction: React.FC<RefreshActionProps> = ({ className, refreshRowData, children, loading, ...props }) => {\r\n  const context = React.useContext(DataGridContext);\r\n\r\n  if (!context) {\r\n    throw new Error(\"RefreshAction should be used within <DataGrid>\");\r\n  }\r\n\r\n  const handleRefresh = () => {\r\n    refreshRowData();\r\n  };\r\n\r\n  return (\r\n    <IconButton\r\n      className={cn(\"p-0.5 w-6 h-6\", loading && \"disabled:bg-transparent\", className)}\r\n      variant=\"toolbar\"\r\n      onClick={handleRefresh}\r\n      disabled={loading}\r\n      {...props}\r\n    >\r\n      {children ?? <Refresh className={cn(\"w-4.5 h-4.5\", loading && \"animate-spin\")} />}\r\n    </IconButton>\r\n  );\r\n};\r\n\r\ntype DeleteActionProps = Omit<ButtonProps, \"onClick\"> & {\r\n  onDelete: () => void;\r\n};\r\n\r\nconst DeleteAction: React.FC<DeleteActionProps> = ({ onDelete, children, ...props }) => {\r\n  const handleDelete = () => {\r\n    onDelete();\r\n  };\r\n\r\n  return (\r\n    <Button variant=\"danger\" onClick={handleDelete} startIcon={<Trashcan className=\"w-4.5 h-4.5\" />} {...props}>\r\n      {children}\r\n    </Button>\r\n  );\r\n};\r\n\r\ntype ExtraActionsProps = PopoverContentProps & {\r\n  children: React.ReactNode;\r\n  slotProps?: {\r\n    triggerProps?: PopoverTriggerProps;\r\n    popoverProps?: PopoverProps;\r\n  };\r\n};\r\n\r\nconst ExtraActions: React.FC<ExtraActionsProps> = ({ children, slotProps, className, ...props }) => {\r\n  return (\r\n    <Popover {...(slotProps?.popoverProps ?? {})}>\r\n      <PopoverTrigger {...(slotProps?.triggerProps ?? {})}>\r\n        <ElipsisVertical className=\"w-4.5 h-4.5 text-primary\" />\r\n      </PopoverTrigger>\r\n      <PopoverContent align=\"end\" className={cn(\"w-40\", className)} {...props}>\r\n        {children}\r\n      </PopoverContent>\r\n    </Popover>\r\n  );\r\n};\r\n\r\nexport {\r\n  DataGrid,\r\n  DataGridContent,\r\n  DataGridActionBar,\r\n  SearchAction,\r\n  FreezeAction,\r\n  PrintAction,\r\n  RefreshAction,\r\n  ExtraActions,\r\n  DeleteAction,\r\n  type DataGridProps,\r\n  type DataGridContentProps,\r\n  type DatagridActionBarProps,\r\n  type SearchActionProps,\r\n  type FreezeActionProps,\r\n  type RefreshActionProps,\r\n  type ExtraActionsProps,\r\n  type DeleteActionProps,\r\n  useDataGrid,\r\n};\r\n"],"names":["appTheme","themeQuartz","DataGridContext","React","useDataGrid","context","DataGrid","children","gridId","api","setApi","rowData","setRowData","actionbarHeight","setActionbarHeight","quickFilterText","setQuickFilterText","actionbarExists","setActionbarExists","jsx","DataGridContent","propTheme","onGridReady","quickFilterTextProps","rowDataProps","containerStyle","props","theme","handleGridReady","e","AgGridReact","DataGridActionBar","className","ref","cn","SearchAction","defaultOpen","isSearchInputOpen","setIsSearchInputOpen","isClosing","setIsClosing","inputRef","handleClear","handleOpen","handleClose","TextField","IconButton","Magnifier","CircleXmark","FreezeAction","freezeText","unFreezeText","onClick","disabled","pinnedRowCount","setPinnedRowCount","selectedRowsCount","setSelectedRowsCount","freezeRows","selectedRows","row","updatedNodes","pinnedRow","node","unfreezeRows","handleFreezing","Button","Snowflake","PrintAction","handlePrint","element","html","printHtml","Print","RefreshAction","refreshRowData","loading","handleRefresh","Refresh","DeleteAction","onDelete","Trashcan","ExtraActions","slotProps","Popover","PopoverTrigger","ElipsisVertical","PopoverContent"],"mappings":";;;;;;;;;;;AAYA,MAAMA,IAAWC,EAAY,WAAW;AAAA,EACtC,YAAY;AAAA,EACZ,UAAU;AAAA,EACV,gBAAgB;AAAA,EAChB,kBAAkB;AACpB,CAAC,GAgBKC,IAAkBC,EAAM,cAAsC,IAAI,GAElEC,IAAc,MAAM;AAClB,QAAAC,IAAUF,EAAM,WAAWD,CAAe;AAEhD,MAAI,CAACG;AACG,UAAA,IAAI,MAAM,8CAA8C;AAGzD,SAAAA;AACT,GAMMC,KAAoC,CAAC,EAAE,UAAAC,QAAe;AACpD,QAAAC,IAASL,EAAM,MAAM,GACrB,CAACM,GAAKC,CAAM,IAAIP,EAAM,SAAyB,IAAI,GACnD,CAACQ,GAASC,CAAU,IAAIT,EAAM,SAAmC,CAAA,CAAE,GACnE,CAACU,GAAiBC,CAAkB,IAAIX,EAAM,SAAS,CAAC,GAExD,CAACY,GAAiBC,CAAkB,IAAIb,EAAM,SAAS,EAAE,GACzD,CAACc,GAAiBC,CAAkB,IAAIf,EAAM,SAAS,EAAK;AAEhE,SAAA,gBAAAgB;AAAA,IAACjB,EAAgB;AAAA,IAAhB;AAAA,MACC,OAAO;AAAA,QACL,KAAAO;AAAA,QACA,QAAAC;AAAA,QACA,SAAAC;AAAA,QACA,YAAAC;AAAA,QACA,QAAAJ;AAAA,QACA,iBAAAO;AAAA,QACA,oBAAAC;AAAA,QACA,iBAAAC;AAAA,QACA,oBAAAC;AAAA,QACA,iBAAAL;AAAA,QACA,oBAAAC;AAAA,MACF;AAAA,MAEC,UAAAP;AAAA,IAAA;AAAA,EACH;AAEJ,GAIMa,KAAkD,CAAC;AAAA,EACvD,OAAOC;AAAA,EACP,aAAAC;AAAA,EACA,iBAAiBC;AAAA,EACjB,SAASC;AAAA,EACT,gBAAAC;AAAA,EACA,GAAGC;AACL,MAAM;AACE,QAAArB,IAAUF,EAAM,WAAWD,CAAe;AAEhD,MAAI,CAACG;AACG,UAAA,IAAI,MAAM,kDAAkD;AAE9D,QAAA,EAAE,SAAAM,GAAS,YAAAC,GAAY,iBAAAK,GAAiB,QAAAP,GAAQ,oBAAAM,GAAoB,iBAAAD,GAAiB,QAAAP,GAAQ,iBAAAK,EAAA,IAAoBR,GAEjHsB,IAAQ3B,EAAS,WAAW;AAAA,IAChC,cAAc;AAAA,IACd,qBAAqBiB,IAAkB,oBAAoB;AAAA,EAAA,CAC5D,GAEKW,IAAkB,CAACC,MAAsB;AAC7C,IAAAnB,EAAOmB,EAAE,GAAG,GACZP,IAAcO,CAAC;AAAA,EACjB;AAEA1B,SAAAA,EAAM,UAAU,MAAM;AACpB,IAAAS,EAAWY,CAAY;AAAA,EAAA,GACtB,CAACA,GAAcZ,CAAU,CAAC,GAE7BT,EAAM,UAAU,MAAM;AACpB,IAAIoB,MAAyB,UAC3BP,EAAmBO,KAAwB,EAAE;AAAA,EAC/C,GACC,CAACA,GAAsBP,CAAkB,CAAC,GAG3C,gBAAAG;AAAA,IAACW;AAAA,IAAA;AAAA,MACC,QAAAtB;AAAA,MACA,OAAOa,KAAaM;AAAA,MACpB,SAAAhB;AAAA,MACA,iBAAAI;AAAA,MACA,aAAaa;AAAA,MACb,gBAAgB,EAAE,QAAQ,eAAef,CAAe,OAAO,GAAGY,EAAe;AAAA,MAChF,GAAGC;AAAA,IAAA;AAAA,EACN;AAEJ,GAIMK,KAAsD,CAAC,EAAE,WAAAC,GAAW,GAAGN,QAAY;AACjF,QAAArB,IAAUF,EAAM,WAAWD,CAAe;AAEhD,MAAI,CAACG;AACG,UAAA,IAAI,MAAM,oDAAoD;AAEhE,QAAA4B,IAAM9B,EAAM,OAA8B,IAAI,GAC9C,EAAE,oBAAAe,GAAoB,oBAAAJ,EAAA,IAAuBT,GAC7C,EAAE,UAAAE,MAAamB;AAErBvB,SAAAA,EAAM,UAAU,OACde,EAAmB,EAAI,GAChB,MAAMA,EAAmB,EAAK,IACpC,CAACA,CAAkB,CAAC,GAEvBf,EAAM,UAAU,MAAM;AACpB,IAAI8B,EAAI,WACanB,EAAAmB,EAAI,QAAQ,YAAY;AAAA,EAC7C,GACC,CAACnB,CAAkB,CAAC,GAGrB,gBAAAK;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWe;AAAA,QACT;AAAA,QACAF;AAAA,MACF;AAAA,MACA,KAAAC;AAAA,MAEC,UAAA1B;AAAA,IAAA;AAAA,EACH;AAEJ,GAMM4B,KAA4C,CAAC,EAAE,aAAAC,IAAc,SAAY;AACvE,QAAA/B,IAAUF,EAAM,WAAWD,CAAe;AAEhD,MAAI,CAACG;AACG,UAAA,IAAI,MAAM,+CAA+C;AAG3D,QAAA,EAAE,iBAAAU,GAAiB,oBAAAC,EAAA,IAAuBX,GAE1C,CAACgC,GAAmBC,CAAoB,IAAInC,EAAM,SAASiC,CAAW,GACtE,CAACG,GAAWC,CAAY,IAAIrC,EAAM,SAAS,EAAK,GAChDsC,IAAWtC,EAAM,OAAgC,IAAI,GAErDuC,IAAc,MAAM;AACxB,IAAArC,EAAQ,mBAAmB,EAAE,GACzBoC,EAAS,WACXA,EAAS,QAAQ,MAAM;AAAA,EAE3B,GAEME,IAAa,MAAM;AACvB,IAAAL,EAAqB,EAAI;AAAA,EAC3B;AAEAnC,EAAAA,EAAM,UAAU,MAAM;AAChB,IAAAkC,KAAqBI,GAAU,WACjCA,EAAS,QAAQ,MAAM;AAAA,EACzB,GACC,CAACJ,CAAiB,CAAC;AAEtB,QAAMO,IAAc,MAAM;AACxB,IAAAJ,EAAa,EAAI,GACjBnC,EAAQ,mBAAmB,EAAE,GAC7B,WAAW,MAAM;AACf,MAAAiC,EAAqB,EAAK,GAC1BE,EAAa,EAAK;AAAA,OACjB,GAAG;AAAA,EACR;AAEA,SACG,gBAAArB,EAAA,OAAA,EAAI,WAAU,YACZ,eAAqBoB,IACpB,gBAAApB;AAAA,IAAC0B;AAAA,IAAA;AAAA,MACC,KAAKJ;AAAA,MACL,WAAWP,EAAG,kBAAkBG,KAAqB,CAACE,IAAY,uBAAuB,IAAIA,KAAa,qBAAqB;AAAA,MAC/H,UAAU,CAAAV,MAAKb,EAAmBa,EAAE,OAAO,KAAK;AAAA,MAChD,OAAOd;AAAA,MACP,gBACE,gBAAAI,EAAC2B,GAAW,EAAA,SAAQ,WAAU,WAAU,kCAAiC,SAASF,GAChF,UAAA,gBAAAzB,EAAC4B,GAAU,EAAA,WAAU,UAAU,CAAA,GACjC;AAAA,MAEF,cACEhC,KACG,gBAAAI,EAAA2B,GAAA,EAAW,SAAQ,WAAU,WAAU,kCAAiC,SAASJ,GAChF,UAAA,gBAAAvB,EAAC6B,GAAY,EAAA,WAAU,WAAU,EACnC,CAAA;AAAA,IAAA;AAAA,EAAA,IAKN,gBAAA7B,EAAC2B,GAAW,EAAA,SAAQ,WAAU,WAAU,qBAAoB,SAASH,GACnE,UAAC,gBAAAxB,EAAA4B,GAAA,EAAU,WAAU,UAAU,CAAA,EACjC,CAAA,GAEJ;AAEJ,GAOME,KAA4C,CAAC,EAAE,YAAAC,GAAY,cAAAC,GAAc,SAAAC,GAAS,UAAAC,GAAU,GAAG3B,QAAY;AACzG,QAAArB,IAAUF,EAAM,WAAWD,CAAe;AAEhD,MAAI,CAACG;AACG,UAAA,IAAI,MAAM,+CAA+C;AAGjE,QAAM,CAACiD,GAAgBC,CAAiB,IAAIpD,EAAM,SAAS,CAAC,GACtD,CAACqD,GAAmBC,CAAoB,IAAItD,EAAM,SAAS,CAAC,GAE5D,EAAE,KAAAM,GAAK,SAAAE,EAAA,IAAYN,GAEnBqD,IAAa,MAAM;AACvB,QAAI,CAACjD,EAAK;AAGJ,UAAAkD,IAAelD,EAAI,iBAAiB;AAEtC,QAAAkD,EAAa,SAAS,GAAG;AAEvB,MAAAlD,EAAA;AAAA,QACF;AAAA,QACAkD,EAAa,IAAI,CAAOC,MAAAA,EAAI,IAAI;AAAA,MAClC;AAKA,YAAMC,IAFUpD,EAAI,iBAAiB,EAER,OAAO,CAAAmD,MAAO,CAACD,EAAa,KAAK,CAAAG,MAAaA,EAAU,OAAOF,EAAI,EAAE,CAAC;AAG/F,MAAAnD,EAAA;AAAA,QACF;AAAA,QACAoD,EAAa,IAAI,CAAQE,MAAAA,EAAK,IAAI;AAAA,MACpC;AAAA,IAAA;AAAA,EAEJ,GAEMC,IAAe,MAAM;AACzB,IAAKvD,MACDA,EAAA,cAAc,oBAAoB,EAAE,GACpCA,EAAA,cAAc,WAAWE,CAAO;AAAA,EACtC,GAEMsD,IAAiB,CAACpC,MAA2C;AACjE,IAAIpB,MACsBA,EAAI,qBAAqB,IAC3B,IACPuD,EAAA,IAEFN,EAAA,IAGfN,IAAUvB,CAAC;AAAA,EACb;AAEA1B,SAAAA,EAAM,UAAU,OACTM,GAAA,iBAAiB,wBAAwB,MAAM;AAChC,IAAA8C,EAAA9C,EAAI,sBAAsB;AAAA,EAAA,CAC7C,GAEIA,GAAA,iBAAiB,oBAAoB,MAAM;AACzB,IAAAgD,EAAAhD,EAAI,iBAAiB,EAAE,MAAM;AAAA,EAAA,CACnD,GAEM,MAAM;AACN,IAAAA,GAAA,oBAAoB,wBAAwB,MAAM;AACnC,MAAA8C,EAAA9C,EAAI,sBAAsB;AAAA,IAAA,CAC7C,GAEIA,GAAA,oBAAoB,oBAAoB,MAAM;AAC5B,MAAAgD,EAAAhD,EAAI,iBAAiB,EAAE,MAAM;AAAA,IAAA,CACnD;AAAA,EACH,IACC,CAACA,CAAG,CAAC,GAGN,gBAAAU;AAAA,IAAC+C;AAAA,IAAA;AAAA,MACC,SAAQ;AAAA,MACR,SAASD;AAAA,MACT,WAAW,gBAAA9C,EAACgD,GAAU,EAAA,WAAU,cAAc,CAAA;AAAA,MAC9C,UAAW,CAACb,KAAkB,CAACE,KAAsBH;AAAA,MACpD,GAAG3B;AAAA,MAEH,UAAA4B,IAAkBH,KAAgB,aAAeD,KAAc;AAAA,IAAA;AAAA,EAClE;AAEJ,GAIMkB,KAA0C,CAAC,EAAE,UAAA7D,GAAU,WAAAyB,GAAW,SAAAoB,GAAS,GAAG1B,QAAY;AACxF,QAAArB,IAAUF,EAAM,WAAWD,CAAe;AAEhD,MAAI,CAACG;AACG,UAAA,IAAI,MAAM,8CAA8C;AAG1D,QAAAgE,IAAc,CAACxC,MAA2C;AAC9D,IAAIxB,EAAQ,QACFA,EAAA,IAAI,cAAc,aAAa,OAAO,GAE9C,WAAW,MAAM;AACf,YAAMiE,IAAU,SAAS,cAAc,eAAejE,EAAQ,SAAS,IAAI,GAErEkE,IAAO;AAAA,UADE,SAAS,KAEf,SAAS;AAAA,UAChBD,EAAQ,SAAS;AAAA;AAEnB,MAAAE,EAAUD,CAAI,GACLlE,GAAA,KAAK,cAAc,aAAa,MAAS;AAAA,IAAA,CACnD,IAEH+C,IAAUvB,CAAC;AAAA,EACb;AAEA,2BACGiB,GAAW,EAAA,SAAQ,WAAU,WAAWZ,EAAG,iBAAiBF,CAAS,GAAG,SAASqC,GAAc,GAAG3C,GAChG,UAAAnB,uBAAakE,GAAM,EAAA,WAAU,UAAU,CAAA,GAC1C;AAEJ,GAMMC,KAA8C,CAAC,EAAE,WAAA1C,GAAW,gBAAA2C,GAAgB,UAAApE,GAAU,SAAAqE,GAAS,GAAGlD,QAAY;AAGlH,MAAI,CAFYvB,EAAM,WAAWD,CAAe;AAGxC,UAAA,IAAI,MAAM,gDAAgD;AAGlE,QAAM2E,IAAgB,MAAM;AACX,IAAAF,EAAA;AAAA,EACjB;AAGE,SAAA,gBAAAxD;AAAA,IAAC2B;AAAA,IAAA;AAAA,MACC,WAAWZ,EAAG,iBAAiB0C,KAAW,2BAA2B5C,CAAS;AAAA,MAC9E,SAAQ;AAAA,MACR,SAAS6C;AAAA,MACT,UAAUD;AAAA,MACT,GAAGlD;AAAA,MAEH,UAAAnB,uBAAauE,GAAQ,EAAA,WAAW5C,EAAG,eAAe0C,KAAW,cAAc,EAAG,CAAA;AAAA,IAAA;AAAA,EACjF;AAEJ,GAMMG,KAA4C,CAAC,EAAE,UAAAC,GAAU,UAAAzE,GAAU,GAAGmB,QAMvE,gBAAAP,EAAA+C,GAAA,EAAO,SAAQ,UAAS,SALN,MAAM;AAChB,EAAAc,EAAA;AACX,GAGkD,WAAY,gBAAA7D,EAAA8D,GAAA,EAAS,WAAU,cAAA,CAAc,GAAK,GAAGvD,GAClG,UAAAnB,GACH,GAYE2E,KAA4C,CAAC,EAAE,UAAA3E,GAAU,WAAA4E,GAAW,WAAAnD,GAAW,GAAGN,0BAEnF0D,GAAS,EAAA,GAAID,GAAW,gBAAgB,CACvC,GAAA,UAAA;AAAA,EAAC,gBAAAhE,EAAAkE,GAAA,EAAgB,GAAIF,GAAW,gBAAgB,IAC9C,UAAC,gBAAAhE,EAAAmE,GAAA,EAAgB,WAAU,2BAAA,CAA2B,EACxD,CAAA;AAAA,EACA,gBAAAnE,EAACoE,GAAe,EAAA,OAAM,OAAM,WAAWrD,EAAG,QAAQF,CAAS,GAAI,GAAGN,GAC/D,UAAAnB,EACH,CAAA;AAAA,GACF;"}

package/dist/desktopdatepicker.es.js

@@ -1,55 +1,57 @@
 import { jsxs as e, jsx as r } from "react/jsx-runtime";
-import * as h from "react";
-import { Calendar as C } from "@trsys-tech/matrix-icons";
-import { cn as k } from "./utils.es.js";
-import { Calendar as x } from "./calendar.es.js";
-import { Button as P } from "./button.es.js";
-import { Popover as v, PopoverTrigger as D, PopoverContent as M } from "./popover.es.js";
+import * as C from "react";
+import { Calendar as k } from "@trsys-tech/matrix-icons";
+import { cn as x } from "./utils.es.js";
+import { Calendar as P } from "./calendar.es.js";
+import { Button as v } from "./button.es.js";
+import { Popover as D, PopoverTrigger as b, PopoverContent as M } from "./popover.es.js";
 import { formatDate as n } from "./format.es.js";
-const I = ({
+const L = ({
   formatStr: o,
   selected: a,
   placeholder: i,
   className: s,
   calendarClassName: m,
   closeOnSelect: p,
-  onDayClick: l,
-  ...d
+  onDayClick: d,
+  disabled: l,
+  ...c
 }) => {
-  const [c, t] = h.useState(!1), f = (y, u, g) => {
-    l?.(y, u, g), p && t(!1);
+  const [f, t] = C.useState(!1), y = (u, g, h) => {
+    d?.(u, g, h), p && t(!1);
   };
-  return /* @__PURE__ */ e(v, { open: c, onOpenChange: t, children: [
-    /* @__PURE__ */ r(D, { asChild: !0, children: /* @__PURE__ */ e(
-      P,
+  return /* @__PURE__ */ e(D, { open: f, onOpenChange: t, children: [
+    /* @__PURE__ */ r(b, { asChild: !0, children: /* @__PURE__ */ e(
+      v,
       {
         variant: "outline",
-        className: k(
-          "w-full border-gray-300 text-text focus:ring-0 active:ring-transparent justify-start",
+        className: x(
+          "w-full border-gray-300 text-text focus:ring-0 active:ring-transparent justify-start disabled:bg-gray-100",
           !a && "text-muted-foreground",
           s
         ),
         "aria-label": a ? `Selected date: ${n(a, o ?? "yyyy/MM/dd")}` : "Pick a date",
+        disabled: l,
         children: [
           a ? n(a, o ?? "yyyy/MM/dd") : /* @__PURE__ */ r("span", { children: i ?? "Pick a date" }),
-          /* @__PURE__ */ r(C, { className: "mr-2 ms-auto" })
+          /* @__PURE__ */ r(k, { className: "mr-2 ms-auto" })
         ]
       }
     ) }),
     /* @__PURE__ */ r(M, { className: "w-auto p-0", children: /* @__PURE__ */ r(
-      x,
+      P,
       {
-        ...d,
+        ...c,
         mode: "single",
         selected: a,
         captionLayout: "dropdown-years",
         className: m,
-        onDayClick: f
+        onDayClick: y
       }
     ) })
   ] });
 };
 export {
-  I as DesktopDatePicker
+  L as DesktopDatePicker
 };
 //# sourceMappingURL=desktopdatepicker.es.js.map

package/dist/desktopdatepicker.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"desktopdatepicker.es.js","sources":["../src/components/date-picker/DesktopDatePicker.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport * as React from \"react\";\r\nimport { format } from \"date-fns\";\r\nimport { Calendar as CalendarIcon } from \"@trsys-tech/matrix-icons\";\r\nimport { PropsBase, PropsSingle, DayEventHandler } from \"react-day-picker\";\r\n\r\nimport { cn } from \"../../lib/utils\";\r\nimport { Calendar } from \"./calendar\";\r\nimport { Button } from \"../button/Button\";\r\nimport { Popover, PopoverContent, PopoverTrigger } from \"../popover/Popover\";\r\n\r\ntype DesktopDatePickerProps = PropsBase &\r\n  Omit<PropsSingle, \"mode\"> & {\r\n    formatStr?: string;\r\n    placeholder?: string;\r\n    calendarClassName?: string;\r\n    selected?: Date;\r\n    required?: boolean;\r\n    closeOnSelect?: boolean;\r\n  };\r\n\r\nconst DesktopDatePicker: React.FC<DesktopDatePickerProps> = ({\r\n  formatStr,\r\n  selected,\r\n  placeholder,\r\n  className,\r\n  calendarClassName,\r\n  closeOnSelect,\r\n  onDayClick,\r\n  ...props\r\n}) => {\r\n  const [isOpen, setIsOpen] = React.useState(false);\r\n\r\n  const handleDayClick: DayEventHandler<React.MouseEvent<Element, MouseEvent>> = (date, modifiers, e) => {\r\n    onDayClick?.(date, modifiers, e);\r\n    if (closeOnSelect) setIsOpen(false);\r\n  };\r\n\r\n  return (\r\n    <Popover open={isOpen} onOpenChange={setIsOpen}>\r\n      <PopoverTrigger asChild>\r\n        <Button\r\n          variant={\"outline\"}\r\n          className={cn(\r\n            \"w-full border-gray-300 text-text focus:ring-0 active:ring-transparent justify-start\",\r\n            !selected && \"text-muted-foreground\",\r\n            className,\r\n          )}\r\n          aria-label={selected ? `Selected date: ${format(selected, formatStr ?? \"yyyy/MM/dd\")}` : \"Pick a date\"}\r\n        >\r\n          {selected ? format(selected, formatStr ?? \"yyyy/MM/dd\") : <span>{placeholder ?? \"Pick a date\"}</span>}\r\n          <CalendarIcon className=\"mr-2 ms-auto\" />\r\n        </Button>\r\n      </PopoverTrigger>\r\n      <PopoverContent className=\"w-auto p-0\">\r\n        <Calendar\r\n          {...props}\r\n          mode=\"single\"\r\n          selected={selected}\r\n          captionLayout=\"dropdown-years\"\r\n          className={calendarClassName}\r\n          onDayClick={handleDayClick}\r\n        />\r\n      </PopoverContent>\r\n    </Popover>\r\n  );\r\n};\r\n\r\nexport { DesktopDatePicker, type DesktopDatePickerProps };\r\n"],"names":["DesktopDatePicker","formatStr","selected","placeholder","className","calendarClassName","closeOnSelect","onDayClick","props","isOpen","setIsOpen","React","handleDayClick","date","modifiers","e","jsxs","Popover","jsx","PopoverTrigger","Button","cn","format","CalendarIcon","PopoverContent","Calendar"],"mappings":";;;;;;;;AAsBA,MAAMA,IAAsD,CAAC;AAAA,EAC3D,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,aAAAC;AAAA,EACA,WAAAC;AAAA,EACA,mBAAAC;AAAA,EACA,eAAAC;AAAA,EACA,YAAAC;AAAA,EACA,GAAGC;AACL,MAAM;AACJ,QAAM,CAACC,GAAQC,CAAS,IAAIC,EAAM,SAAS,EAAK,GAE1CC,IAAyE,CAACC,GAAMC,GAAWC,MAAM;AACxF,IAAAR,IAAAM,GAAMC,GAAWC,CAAC,GAC3BT,OAAyB,EAAK;AAAA,EACpC;AAEA,SACG,gBAAAU,EAAAC,GAAA,EAAQ,MAAMR,GAAQ,cAAcC,GACnC,UAAA;AAAA,IAAC,gBAAAQ,EAAAC,GAAA,EAAe,SAAO,IACrB,UAAA,gBAAAH;AAAA,MAACI;AAAA,MAAA;AAAA,QACC,SAAS;AAAA,QACT,WAAWC;AAAA,UACT;AAAA,UACA,CAACnB,KAAY;AAAA,UACbE;AAAA,QACF;AAAA,QACA,cAAYF,IAAW,kBAAkBoB,EAAOpB,GAAUD,KAAa,YAAY,CAAC,KAAK;AAAA,QAExF,UAAA;AAAA,UAAWC,IAAAoB,EAAOpB,GAAUD,KAAa,YAAY,IAAK,gBAAAiB,EAAA,QAAA,EAAM,eAAe,cAAc,CAAA;AAAA,UAC9F,gBAAAA,EAACK,GAAa,EAAA,WAAU,eAAe,CAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA,GAE3C;AAAA,IACA,gBAAAL,EAACM,GAAe,EAAA,WAAU,cACxB,UAAA,gBAAAN;AAAA,MAACO;AAAAA,MAAA;AAAA,QACE,GAAGjB;AAAA,QACJ,MAAK;AAAA,QACL,UAAAN;AAAA,QACA,eAAc;AAAA,QACd,WAAWG;AAAA,QACX,YAAYO;AAAA,MAAA;AAAA,IAAA,EAEhB,CAAA;AAAA,EAAA,GACF;AAEJ;"}
+{"version":3,"file":"desktopdatepicker.es.js","sources":["../src/components/date-picker/DesktopDatePicker.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport * as React from \"react\";\r\nimport { format } from \"date-fns\";\r\nimport { Calendar as CalendarIcon } from \"@trsys-tech/matrix-icons\";\r\nimport { PropsBase, PropsSingle, DayEventHandler } from \"react-day-picker\";\r\n\r\nimport { cn } from \"../../lib/utils\";\r\nimport { Calendar } from \"./calendar\";\r\nimport { Button } from \"../button/Button\";\r\nimport { Popover, PopoverContent, PopoverTrigger } from \"../popover/Popover\";\r\n\r\ntype DesktopDatePickerProps = PropsBase &\r\n  Omit<PropsSingle, \"mode\"> & {\r\n    formatStr?: string;\r\n    placeholder?: string;\r\n    calendarClassName?: string;\r\n    selected?: Date;\r\n    required?: boolean;\r\n    closeOnSelect?: boolean;\r\n    disabled?: boolean;\r\n  };\r\n\r\nconst DesktopDatePicker: React.FC<DesktopDatePickerProps> = ({\r\n  formatStr,\r\n  selected,\r\n  placeholder,\r\n  className,\r\n  calendarClassName,\r\n  closeOnSelect,\r\n  onDayClick,\r\n  disabled,\r\n  ...props\r\n}) => {\r\n  const [isOpen, setIsOpen] = React.useState(false);\r\n\r\n  const handleDayClick: DayEventHandler<React.MouseEvent<Element, MouseEvent>> = (date, modifiers, e) => {\r\n    onDayClick?.(date, modifiers, e);\r\n    if (closeOnSelect) setIsOpen(false);\r\n  };\r\n\r\n  return (\r\n    <Popover open={isOpen} onOpenChange={setIsOpen}>\r\n      <PopoverTrigger asChild>\r\n        <Button\r\n          variant={\"outline\"}\r\n          className={cn(\r\n            \"w-full border-gray-300 text-text focus:ring-0 active:ring-transparent justify-start disabled:bg-gray-100\",\r\n            !selected && \"text-muted-foreground\",\r\n            className,\r\n          )}\r\n          aria-label={selected ? `Selected date: ${format(selected, formatStr ?? \"yyyy/MM/dd\")}` : \"Pick a date\"}\r\n          disabled={disabled}\r\n        >\r\n          {selected ? format(selected, formatStr ?? \"yyyy/MM/dd\") : <span>{placeholder ?? \"Pick a date\"}</span>}\r\n          <CalendarIcon className=\"mr-2 ms-auto\" />\r\n        </Button>\r\n      </PopoverTrigger>\r\n      <PopoverContent className=\"w-auto p-0\">\r\n        <Calendar\r\n          {...props}\r\n          mode=\"single\"\r\n          selected={selected}\r\n          captionLayout=\"dropdown-years\"\r\n          className={calendarClassName}\r\n          onDayClick={handleDayClick}\r\n        />\r\n      </PopoverContent>\r\n    </Popover>\r\n  );\r\n};\r\n\r\nexport { DesktopDatePicker, type DesktopDatePickerProps };\r\n"],"names":["DesktopDatePicker","formatStr","selected","placeholder","className","calendarClassName","closeOnSelect","onDayClick","disabled","props","isOpen","setIsOpen","React","handleDayClick","date","modifiers","e","jsxs","Popover","jsx","PopoverTrigger","Button","cn","format","CalendarIcon","PopoverContent","Calendar"],"mappings":";;;;;;;;AAuBA,MAAMA,IAAsD,CAAC;AAAA,EAC3D,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,aAAAC;AAAA,EACA,WAAAC;AAAA,EACA,mBAAAC;AAAA,EACA,eAAAC;AAAA,EACA,YAAAC;AAAA,EACA,UAAAC;AAAA,EACA,GAAGC;AACL,MAAM;AACJ,QAAM,CAACC,GAAQC,CAAS,IAAIC,EAAM,SAAS,EAAK,GAE1CC,IAAyE,CAACC,GAAMC,GAAWC,MAAM;AACxF,IAAAT,IAAAO,GAAMC,GAAWC,CAAC,GAC3BV,OAAyB,EAAK;AAAA,EACpC;AAEA,SACG,gBAAAW,EAAAC,GAAA,EAAQ,MAAMR,GAAQ,cAAcC,GACnC,UAAA;AAAA,IAAC,gBAAAQ,EAAAC,GAAA,EAAe,SAAO,IACrB,UAAA,gBAAAH;AAAA,MAACI;AAAA,MAAA;AAAA,QACC,SAAS;AAAA,QACT,WAAWC;AAAA,UACT;AAAA,UACA,CAACpB,KAAY;AAAA,UACbE;AAAA,QACF;AAAA,QACA,cAAYF,IAAW,kBAAkBqB,EAAOrB,GAAUD,KAAa,YAAY,CAAC,KAAK;AAAA,QACzF,UAAAO;AAAA,QAEC,UAAA;AAAA,UAAWN,IAAAqB,EAAOrB,GAAUD,KAAa,YAAY,IAAK,gBAAAkB,EAAA,QAAA,EAAM,eAAe,cAAc,CAAA;AAAA,UAC9F,gBAAAA,EAACK,GAAa,EAAA,WAAU,eAAe,CAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA,GAE3C;AAAA,IACA,gBAAAL,EAACM,GAAe,EAAA,WAAU,cACxB,UAAA,gBAAAN;AAAA,MAACO;AAAAA,MAAA;AAAA,QACE,GAAGjB;AAAA,QACJ,MAAK;AAAA,QACL,UAAAP;AAAA,QACA,eAAc;AAAA,QACd,WAAWG;AAAA,QACX,YAAYQ;AAAA,MAAA;AAAA,IAAA,EAEhB,CAAA;AAAA,EAAA,GACF;AAEJ;"}

package/dist/desktopdaterangepicker.es.js

@@ -1,64 +1,66 @@
 import { jsxs as a, jsx as o } from "react/jsx-runtime";
-import * as g from "react";
-import { Calendar as c } from "@trsys-tech/matrix-icons";
-import { cn as i } from "./utils.es.js";
-import { Calendar as h } from "./calendar.es.js";
-import { Button as M } from "./button.es.js";
-import { Popover as x, PopoverTrigger as v, PopoverContent as C } from "./popover.es.js";
+import * as c from "react";
+import { Calendar as h } from "@trsys-tech/matrix-icons";
+import { cn as m } from "./utils.es.js";
+import { Calendar as M } from "./calendar.es.js";
+import { Button as x } from "./button.es.js";
+import { Popover as v, PopoverTrigger as C, PopoverContent as b } from "./popover.es.js";
 import { formatDate as t } from "./format.es.js";
-const D = ({
+const R = ({
   formatStr: n,
   selected: r,
-  placeholder: m,
+  placeholder: i,
   className: s,
   calendarClassName: e,
-  fromText: p,
-  toText: f,
-  ...d
+  fromText: d,
+  toText: p,
+  disabled: f,
+  ...y
 }) => {
-  const [y, l] = g.useState(!1);
+  const [l, g] = c.useState(!1);
   return /* @__PURE__ */ a(
-    x,
+    v,
     {
-      open: y,
+      open: l,
       onOpenChange: (u) => {
-        l(u);
+        g(u);
       },
       children: [
-        /* @__PURE__ */ o(v, { asChild: !0, children: /* @__PURE__ */ a(
-          M,
+        /* @__PURE__ */ o(C, { asChild: !0, children: /* @__PURE__ */ a(
+          x,
           {
             variant: "outline",
-            className: i(
-              "w-full border-gray-300 text-text focus:ring-0 active:ring-transparent justify-start",
+            className: m(
+              "w-full border-gray-300 text-text focus:ring-0 active:ring-transparent justify-start disabled:bg-gray-100",
               !r && "text-muted-foreground",
               s
             ),
-            "aria-label": r ? `Selected date: ${r?.from ? t(r.from, n ?? "yyyy/MM/dd") : ""} - ${r?.to ? t(r.to, n ?? "yyyy/MM/dd") : ""}` : m,
+            "aria-label": r ? `Selected date: ${r?.from ? t(r.from, n ?? "yyyy/MM/dd") : ""} - ${r?.to ? t(r.to, n ?? "yyyy/MM/dd") : ""}` : i,
+            disabled: f,
             children: [
               r ? /* @__PURE__ */ a("div", { className: "grid grid-cols-2 flex-1 justify-items-start", children: [
                 /* @__PURE__ */ a("span", { children: [
-                  p ?? "From",
+                  d ?? "From",
                   ": ",
                   r?.from ? t(r.from, n ?? "yyyy/MM/dd") : "-"
                 ] }),
                 " ",
                 /* @__PURE__ */ a("span", { children: [
-                  f ?? "To",
+                  p ?? "To",
                   ": ",
                   r?.to ? t(r.to, n ?? "yyyy/MM/dd") : "-"
                 ] })
-              ] }) : /* @__PURE__ */ o("span", { children: m ?? "Pick a Range" }),
-              /* @__PURE__ */ o(c, { className: "mr-2 h-5 w-4 ms-auto" })
+              ] }) : /* @__PURE__ */ o("span", { children: i ?? "Pick a Range" }),
+              /* @__PURE__ */ o(h, { className: "mr-2 h-5 w-4 ms-auto" })
             ]
           }
         ) }),
-        /* @__PURE__ */ o(C, { className: "w-auto p-0", align: "start", children: /* @__PURE__ */ o(h, { ...d, mode: "range", selected: r, className: i(e, "md:max-w-full md:w-[36rem]"), numberOfMonths: 2 }) })
+        /* @__PURE__ */ o(b, { className: "w-auto p-0", align: "start", children: /* @__PURE__ */ o(M, { ...y, mode: "range", selected: r, className: m(e, "md:max-w-full md:w-[36rem]"), numberOfMonths: 2 }) })
       ]
     }
   );
 };
 export {
-  D as DesktopDateRangePicker
+  R as DesktopDateRangePicker
 };
 //# sourceMappingURL=desktopdaterangepicker.es.js.map

package/dist/desktopdaterangepicker.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"desktopdaterangepicker.es.js","sources":["../src/components/date-picker/DesktopDateRangePicker.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport * as React from \"react\";\r\nimport { format } from \"date-fns\";\r\nimport { PropsBase, PropsRange, DateRange } from \"react-day-picker\";\r\nimport { Calendar as CalendarIcon } from \"@trsys-tech/matrix-icons\";\r\n\r\nimport { cn } from \"../../lib/utils\";\r\nimport { Calendar } from \"./calendar\";\r\nimport { Button } from \"../button/Button\";\r\nimport { Popover, PopoverContent, PopoverTrigger } from \"../popover/Popover\";\r\n\r\ntype DesktopDateRangePickerProps = PropsBase &\r\n  Omit<PropsRange, \"mode\"> & {\r\n    formatStr?: string;\r\n    placeholder?: string;\r\n    calendarClassName?: string;\r\n    selected?: DateRange;\r\n    required?: boolean;\r\n    fromText?: string;\r\n    toText?: string;\r\n  };\r\n\r\nconst DesktopDateRangePicker: React.FC<DesktopDateRangePickerProps> = ({\r\n  formatStr,\r\n  selected,\r\n  placeholder,\r\n  className,\r\n  calendarClassName,\r\n  fromText,\r\n  toText,\r\n  ...props\r\n}) => {\r\n  const [isOpen, setIsOpen] = React.useState(false);\r\n\r\n  return (\r\n    <Popover\r\n      open={isOpen}\r\n      onOpenChange={open => {\r\n        setIsOpen(open);\r\n      }}\r\n    >\r\n      <PopoverTrigger asChild>\r\n        <Button\r\n          variant={\"outline\"}\r\n          className={cn(\r\n            \"w-full border-gray-300 text-text focus:ring-0 active:ring-transparent justify-start\",\r\n            !selected && \"text-muted-foreground\",\r\n            className,\r\n          )}\r\n          aria-label={\r\n            selected\r\n              ? `Selected date: ${selected?.from ? format(selected.from, formatStr ?? \"yyyy/MM/dd\") : \"\"} - ${selected?.to ? format(selected.to, formatStr ?? \"yyyy/MM/dd\") : \"\"}`\r\n              : placeholder\r\n          }\r\n        >\r\n          {selected ? (\r\n            <div className=\"grid grid-cols-2 flex-1 justify-items-start\">\r\n              <span>\r\n                {fromText ?? \"From\"}: {selected?.from ? format(selected.from, formatStr ?? \"yyyy/MM/dd\") : \"-\"}\r\n              </span>{\" \"}\r\n              <span>\r\n                {toText ?? \"To\"}: {selected?.to ? format(selected.to, formatStr ?? \"yyyy/MM/dd\") : \"-\"}\r\n              </span>\r\n            </div>\r\n          ) : (\r\n            <span>{placeholder ?? \"Pick a Range\"}</span>\r\n          )}\r\n          <CalendarIcon className=\"mr-2 h-5 w-4 ms-auto\" />\r\n        </Button>\r\n        {/* <div className=\"flex gap-2\">\r\n          <Button\r\n            variant={\"outline\"}\r\n            className={cn(\r\n              \"border-gray-300 text-text focus:ring-0 active:ring-transparent justify-start\",\r\n              !selected && \"text-muted-foreground\",\r\n              className,\r\n            )}\r\n          >\r\n            {selected?.from ? format(selected.from, formatStr ?? \"yyyy/MM/dd\") : <span>{placeholder ?? \"From\"}</span>}\r\n            <CalendarIcon className=\"mr-2 h-5 w-5 ms-auto\" />\r\n          </Button>\r\n          <Button\r\n            variant={\"outline\"}\r\n            className={cn(\r\n              \"border-gray-300 text-text focus:ring-0 active:ring-transparent justify-start\",\r\n              !selected && \"text-muted-foreground\",\r\n              className,\r\n            )}\r\n          >\r\n            {selected?.to ? format(selected.to, formatStr ?? \"yyyy/MM/dd\") : <span>{placeholder ?? \"To\"}</span>}\r\n            <CalendarIcon className=\"mr-2 h-5 w-5 ms-auto\" />\r\n          </Button>\r\n        </div> */}\r\n      </PopoverTrigger>\r\n      <PopoverContent className=\"w-auto p-0\" align=\"start\">\r\n        <Calendar {...props} mode=\"range\" selected={selected} className={cn(calendarClassName, \"md:max-w-full md:w-[36rem]\")} numberOfMonths={2} />\r\n      </PopoverContent>\r\n    </Popover>\r\n  );\r\n};\r\n\r\nexport { DesktopDateRangePicker, type DesktopDateRangePickerProps };\r\n"],"names":["DesktopDateRangePicker","formatStr","selected","placeholder","className","calendarClassName","fromText","toText","props","isOpen","setIsOpen","React","jsxs","Popover","open","jsx","PopoverTrigger","Button","cn","format","CalendarIcon","PopoverContent","Calendar"],"mappings":";;;;;;;;AAuBA,MAAMA,IAAgE,CAAC;AAAA,EACrE,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,aAAAC;AAAA,EACA,WAAAC;AAAA,EACA,mBAAAC;AAAA,EACA,UAAAC;AAAA,EACA,QAAAC;AAAA,EACA,GAAGC;AACL,MAAM;AACJ,QAAM,CAACC,GAAQC,CAAS,IAAIC,EAAM,SAAS,EAAK;AAG9C,SAAA,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,MAAMJ;AAAA,MACN,cAAc,CAAQK,MAAA;AACpB,QAAAJ,EAAUI,CAAI;AAAA,MAChB;AAAA,MAEA,UAAA;AAAA,QAAC,gBAAAC,EAAAC,GAAA,EAAe,SAAO,IACrB,UAAA,gBAAAJ;AAAA,UAACK;AAAA,UAAA;AAAA,YACC,SAAS;AAAA,YACT,WAAWC;AAAA,cACT;AAAA,cACA,CAAChB,KAAY;AAAA,cACbE;AAAA,YACF;AAAA,YACA,cACEF,IACI,kBAAkBA,GAAU,OAAOiB,EAAOjB,EAAS,MAAMD,KAAa,YAAY,IAAI,EAAE,MAAMC,GAAU,KAAKiB,EAAOjB,EAAS,IAAID,KAAa,YAAY,IAAI,EAAE,KAChKE;AAAA,YAGL,UAAA;AAAA,cACCD,IAAA,gBAAAU,EAAC,OAAI,EAAA,WAAU,+CACb,UAAA;AAAA,gBAAA,gBAAAA,EAAC,QACE,EAAA,UAAA;AAAA,kBAAYN,KAAA;AAAA,kBAAO;AAAA,kBAAGJ,GAAU,OAAOiB,EAAOjB,EAAS,MAAMD,KAAa,YAAY,IAAI;AAAA,gBAAA,GAC7F;AAAA,gBAAQ;AAAA,kCACP,QACE,EAAA,UAAA;AAAA,kBAAUM,KAAA;AAAA,kBAAK;AAAA,kBAAGL,GAAU,KAAKiB,EAAOjB,EAAS,IAAID,KAAa,YAAY,IAAI;AAAA,gBAAA,EACrF,CAAA;AAAA,cAAA,EACF,CAAA,IAEA,gBAAAc,EAAC,QAAM,EAAA,UAAAZ,KAAe,gBAAe;AAAA,cAEvC,gBAAAY,EAACK,GAAa,EAAA,WAAU,uBAAuB,CAAA;AAAA,YAAA;AAAA,UAAA;AAAA,QAAA,GA0BnD;AAAA,QACA,gBAAAL,EAACM,KAAe,WAAU,cAAa,OAAM,SAC3C,UAAA,gBAAAN,EAACO,KAAU,GAAGd,GAAO,MAAK,SAAQ,UAAAN,GAAoB,WAAWgB,EAAGb,GAAmB,4BAA4B,GAAG,gBAAgB,GAAG,EAC3I,CAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EACF;AAEJ;"}
+{"version":3,"file":"desktopdaterangepicker.es.js","sources":["../src/components/date-picker/DesktopDateRangePicker.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport * as React from \"react\";\r\nimport { format } from \"date-fns\";\r\nimport { PropsBase, PropsRange, DateRange } from \"react-day-picker\";\r\nimport { Calendar as CalendarIcon } from \"@trsys-tech/matrix-icons\";\r\n\r\nimport { cn } from \"../../lib/utils\";\r\nimport { Calendar } from \"./calendar\";\r\nimport { Button } from \"../button/Button\";\r\nimport { Popover, PopoverContent, PopoverTrigger } from \"../popover/Popover\";\r\n\r\ntype DesktopDateRangePickerProps = PropsBase &\r\n  Omit<PropsRange, \"mode\"> & {\r\n    formatStr?: string;\r\n    placeholder?: string;\r\n    calendarClassName?: string;\r\n    selected?: DateRange;\r\n    required?: boolean;\r\n    fromText?: string;\r\n    toText?: string;\r\n    disabled?: boolean;\r\n  };\r\n\r\nconst DesktopDateRangePicker: React.FC<DesktopDateRangePickerProps> = ({\r\n  formatStr,\r\n  selected,\r\n  placeholder,\r\n  className,\r\n  calendarClassName,\r\n  fromText,\r\n  toText,\r\n  disabled,\r\n  ...props\r\n}) => {\r\n  const [isOpen, setIsOpen] = React.useState(false);\r\n\r\n  return (\r\n    <Popover\r\n      open={isOpen}\r\n      onOpenChange={open => {\r\n        setIsOpen(open);\r\n      }}\r\n    >\r\n      <PopoverTrigger asChild>\r\n        <Button\r\n          variant={\"outline\"}\r\n          className={cn(\r\n            \"w-full border-gray-300 text-text focus:ring-0 active:ring-transparent justify-start disabled:bg-gray-100\",\r\n            !selected && \"text-muted-foreground\",\r\n            className,\r\n          )}\r\n          aria-label={\r\n            selected\r\n              ? `Selected date: ${selected?.from ? format(selected.from, formatStr ?? \"yyyy/MM/dd\") : \"\"} - ${selected?.to ? format(selected.to, formatStr ?? \"yyyy/MM/dd\") : \"\"}`\r\n              : placeholder\r\n          }\r\n          disabled={disabled}\r\n        >\r\n          {selected ? (\r\n            <div className=\"grid grid-cols-2 flex-1 justify-items-start\">\r\n              <span>\r\n                {fromText ?? \"From\"}: {selected?.from ? format(selected.from, formatStr ?? \"yyyy/MM/dd\") : \"-\"}\r\n              </span>{\" \"}\r\n              <span>\r\n                {toText ?? \"To\"}: {selected?.to ? format(selected.to, formatStr ?? \"yyyy/MM/dd\") : \"-\"}\r\n              </span>\r\n            </div>\r\n          ) : (\r\n            <span>{placeholder ?? \"Pick a Range\"}</span>\r\n          )}\r\n          <CalendarIcon className=\"mr-2 h-5 w-4 ms-auto\" />\r\n        </Button>\r\n        {/* <div className=\"flex gap-2\">\r\n          <Button\r\n            variant={\"outline\"}\r\n            className={cn(\r\n              \"border-gray-300 text-text focus:ring-0 active:ring-transparent justify-start\",\r\n              !selected && \"text-muted-foreground\",\r\n              className,\r\n            )}\r\n          >\r\n            {selected?.from ? format(selected.from, formatStr ?? \"yyyy/MM/dd\") : <span>{placeholder ?? \"From\"}</span>}\r\n            <CalendarIcon className=\"mr-2 h-5 w-5 ms-auto\" />\r\n          </Button>\r\n          <Button\r\n            variant={\"outline\"}\r\n            className={cn(\r\n              \"border-gray-300 text-text focus:ring-0 active:ring-transparent justify-start\",\r\n              !selected && \"text-muted-foreground\",\r\n              className,\r\n            )}\r\n          >\r\n            {selected?.to ? format(selected.to, formatStr ?? \"yyyy/MM/dd\") : <span>{placeholder ?? \"To\"}</span>}\r\n            <CalendarIcon className=\"mr-2 h-5 w-5 ms-auto\" />\r\n          </Button>\r\n        </div> */}\r\n      </PopoverTrigger>\r\n      <PopoverContent className=\"w-auto p-0\" align=\"start\">\r\n        <Calendar {...props} mode=\"range\" selected={selected} className={cn(calendarClassName, \"md:max-w-full md:w-[36rem]\")} numberOfMonths={2} />\r\n      </PopoverContent>\r\n    </Popover>\r\n  );\r\n};\r\n\r\nexport { DesktopDateRangePicker, type DesktopDateRangePickerProps };\r\n"],"names":["DesktopDateRangePicker","formatStr","selected","placeholder","className","calendarClassName","fromText","toText","disabled","props","isOpen","setIsOpen","React","jsxs","Popover","open","jsx","PopoverTrigger","Button","cn","format","CalendarIcon","PopoverContent","Calendar"],"mappings":";;;;;;;;AAwBA,MAAMA,IAAgE,CAAC;AAAA,EACrE,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,aAAAC;AAAA,EACA,WAAAC;AAAA,EACA,mBAAAC;AAAA,EACA,UAAAC;AAAA,EACA,QAAAC;AAAA,EACA,UAAAC;AAAA,EACA,GAAGC;AACL,MAAM;AACJ,QAAM,CAACC,GAAQC,CAAS,IAAIC,EAAM,SAAS,EAAK;AAG9C,SAAA,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,MAAMJ;AAAA,MACN,cAAc,CAAQK,MAAA;AACpB,QAAAJ,EAAUI,CAAI;AAAA,MAChB;AAAA,MAEA,UAAA;AAAA,QAAC,gBAAAC,EAAAC,GAAA,EAAe,SAAO,IACrB,UAAA,gBAAAJ;AAAA,UAACK;AAAA,UAAA;AAAA,YACC,SAAS;AAAA,YACT,WAAWC;AAAA,cACT;AAAA,cACA,CAACjB,KAAY;AAAA,cACbE;AAAA,YACF;AAAA,YACA,cACEF,IACI,kBAAkBA,GAAU,OAAOkB,EAAOlB,EAAS,MAAMD,KAAa,YAAY,IAAI,EAAE,MAAMC,GAAU,KAAKkB,EAAOlB,EAAS,IAAID,KAAa,YAAY,IAAI,EAAE,KAChKE;AAAA,YAEN,UAAAK;AAAA,YAEC,UAAA;AAAA,cACCN,IAAA,gBAAAW,EAAC,OAAI,EAAA,WAAU,+CACb,UAAA;AAAA,gBAAA,gBAAAA,EAAC,QACE,EAAA,UAAA;AAAA,kBAAYP,KAAA;AAAA,kBAAO;AAAA,kBAAGJ,GAAU,OAAOkB,EAAOlB,EAAS,MAAMD,KAAa,YAAY,IAAI;AAAA,gBAAA,GAC7F;AAAA,gBAAQ;AAAA,kCACP,QACE,EAAA,UAAA;AAAA,kBAAUM,KAAA;AAAA,kBAAK;AAAA,kBAAGL,GAAU,KAAKkB,EAAOlB,EAAS,IAAID,KAAa,YAAY,IAAI;AAAA,gBAAA,EACrF,CAAA;AAAA,cAAA,EACF,CAAA,IAEA,gBAAAe,EAAC,QAAM,EAAA,UAAAb,KAAe,gBAAe;AAAA,cAEvC,gBAAAa,EAACK,GAAa,EAAA,WAAU,uBAAuB,CAAA;AAAA,YAAA;AAAA,UAAA;AAAA,QAAA,GA0BnD;AAAA,QACA,gBAAAL,EAACM,KAAe,WAAU,cAAa,OAAM,SAC3C,UAAA,gBAAAN,EAACO,KAAU,GAAGd,GAAO,MAAK,SAAQ,UAAAP,GAAoB,WAAWiB,EAAGd,GAAmB,4BAA4B,GAAG,gBAAgB,GAAG,EAC3I,CAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EACF;AAEJ;"}

package/dist/desktoptimepicker.es.js

@@ -1,10 +1,10 @@
 import { jsxs as s, jsx as t } from "react/jsx-runtime";
-import { useState as u } from "react";
+import { useState as l } from "react";
 import { cn as n } from "./utils.es.js";
-import { Button as l } from "./button.es.js";
-import { TimePickerContent as f } from "./timepickercontent.es.js";
-import { Popover as d, PopoverTrigger as h, PopoverContent as g } from "./popover.es.js";
-const P = ({
+import { Button as u } from "./button.es.js";
+import { TimePickerContent as d } from "./timepickercontent.es.js";
+import { Popover as f, PopoverTrigger as g, PopoverContent as h } from "./popover.es.js";
+const C = ({
   time: r,
   onTimeChange: a,
   className: i,
@@ -12,22 +12,22 @@ const P = ({
   placeholder: p = "Pick a Time",
   ...c
 }) => {
-  const [o, m] = u(!1);
-  return /* @__PURE__ */ s(d, { open: o, onOpenChange: m, children: [
-    /* @__PURE__ */ t(h, { asChild: !0, children: /* @__PURE__ */ t(
-      l,
+  const [o, m] = l(!1);
+  return /* @__PURE__ */ s(f, { open: o, onOpenChange: m, children: [
+    /* @__PURE__ */ t(g, { asChild: !0, children: /* @__PURE__ */ t(
+      u,
       {
         variant: "outline",
-        className: n("w-full border-gray-300 text-text focus:ring-0 active:ring-transparent justify-start", i),
+        className: n("w-full border-gray-300 text-text focus:ring-0 active:ring-transparent justify-start disabled:bg-gray-100", i),
         "aria-label": r?.hour ? `Selected time: ${r.hour}:${r.minute} ${r.ampm}` : p,
         ...c,
         children: `${r?.hour?.toString()?.padStart(2, "0") ?? "--"} : ${r?.minute?.toString()?.padStart(2, "0") ?? "--"} ${r?.ampm ?? "--"}`
       }
     ) }),
-    /* @__PURE__ */ t(g, { ...e?.content ?? {}, className: n("w-auto p-0", e?.content?.className), children: /* @__PURE__ */ t(f, { isOpen: o, onTimeChange: a, time: r, slotsProps: e }) })
+    /* @__PURE__ */ t(h, { ...e?.content ?? {}, className: n("w-auto p-0", e?.content?.className), children: /* @__PURE__ */ t(d, { isOpen: o, onTimeChange: a, time: r, slotsProps: e }) })
   ] });
 };
 export {
-  P as DesktopTimePicker
+  C as DesktopTimePicker
 };
 //# sourceMappingURL=desktoptimepicker.es.js.map

package/dist/desktoptimepicker.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"desktoptimepicker.es.js","sources":["../src/components/date-picker/DesktopTimePicker.tsx"],"sourcesContent":["import { HTMLAttributes, useState } from \"react\";\r\n\r\nimport { cn } from \"../../lib/utils\";\r\nimport { Button } from \"../button/Button\";\r\nimport { Time, TimePickerContent } from \"./TimePickerContent\";\r\nimport { Popover, PopoverContent, PopoverTrigger } from \"../popover/Popover\";\r\n\r\ntype DesktopTimePickerProps = HTMLAttributes<HTMLButtonElement> & {\r\n  time: Time | undefined;\r\n  onTimeChange: (time: Time | undefined) => void;\r\n  placeholder?: string;\r\n  slotsProps?: {\r\n    content?: HTMLAttributes<HTMLDivElement>;\r\n  };\r\n};\r\n\r\nconst DesktopTimePicker: React.FC<DesktopTimePickerProps> = ({\r\n  time,\r\n  onTimeChange,\r\n  className,\r\n  slotsProps,\r\n  placeholder = \"Pick a Time\",\r\n  ...restProps\r\n}) => {\r\n  const [isOpen, setIsOpen] = useState(false);\r\n\r\n  return (\r\n    <Popover open={isOpen} onOpenChange={setIsOpen}>\r\n      <PopoverTrigger asChild>\r\n        <Button\r\n          variant={\"outline\"}\r\n          className={cn(\"w-full border-gray-300 text-text focus:ring-0 active:ring-transparent justify-start\", className)}\r\n          aria-label={time?.hour ? `Selected time: ${time.hour}:${time.minute} ${time.ampm}` : placeholder}\r\n          {...restProps}\r\n        >\r\n          {`${time?.hour?.toString()?.padStart(2, \"0\") ?? \"--\"} : ${time?.minute?.toString()?.padStart(2, \"0\") ?? \"--\"} ${time?.ampm ?? \"--\"}`}\r\n        </Button>\r\n      </PopoverTrigger>\r\n      <PopoverContent {...(slotsProps?.content ?? {})} className={cn(\"w-auto p-0\", slotsProps?.content?.className)}>\r\n        <TimePickerContent isOpen={isOpen} onTimeChange={onTimeChange} time={time} slotsProps={slotsProps} />\r\n      </PopoverContent>\r\n    </Popover>\r\n  );\r\n};\r\nexport { DesktopTimePicker, type DesktopTimePickerProps };\r\n"],"names":["DesktopTimePicker","time","onTimeChange","className","slotsProps","placeholder","restProps","isOpen","setIsOpen","useState","jsxs","Popover","jsx","PopoverTrigger","Button","cn","PopoverContent","TimePickerContent"],"mappings":";;;;;;AAgBA,MAAMA,IAAsD,CAAC;AAAA,EAC3D,MAAAC;AAAA,EACA,cAAAC;AAAA,EACA,WAAAC;AAAA,EACA,YAAAC;AAAA,EACA,aAAAC,IAAc;AAAA,EACd,GAAGC;AACL,MAAM;AACJ,QAAM,CAACC,GAAQC,CAAS,IAAIC,EAAS,EAAK;AAE1C,SACG,gBAAAC,EAAAC,GAAA,EAAQ,MAAMJ,GAAQ,cAAcC,GACnC,UAAA;AAAA,IAAC,gBAAAI,EAAAC,GAAA,EAAe,SAAO,IACrB,UAAA,gBAAAD;AAAA,MAACE;AAAA,MAAA;AAAA,QACC,SAAS;AAAA,QACT,WAAWC,EAAG,uFAAuFZ,CAAS;AAAA,QAC9G,cAAYF,GAAM,OAAO,kBAAkBA,EAAK,IAAI,IAAIA,EAAK,MAAM,IAAIA,EAAK,IAAI,KAAKI;AAAA,QACpF,GAAGC;AAAA,QAEH,UAAA,GAAGL,GAAM,MAAM,SAAA,GAAY,SAAS,GAAG,GAAG,KAAK,IAAI,MAAMA,GAAM,QAAQ,SAAA,GAAY,SAAS,GAAG,GAAG,KAAK,IAAI,IAAIA,GAAM,QAAQ,IAAI;AAAA,MAAA;AAAA,IAAA,GAEtI;AAAA,IACA,gBAAAW,EAACI,KAAgB,GAAIZ,GAAY,WAAW,CAAA,GAAK,WAAWW,EAAG,cAAcX,GAAY,SAAS,SAAS,GACzG,UAAC,gBAAAQ,EAAAK,GAAA,EAAkB,QAAAV,GAAgB,cAAAL,GAA4B,MAAAD,GAAY,YAAAG,GAAwB,EACrG,CAAA;AAAA,EAAA,GACF;AAEJ;"}
+{"version":3,"file":"desktoptimepicker.es.js","sources":["../src/components/date-picker/DesktopTimePicker.tsx"],"sourcesContent":["import { HTMLAttributes, useState } from \"react\";\r\n\r\nimport { cn } from \"../../lib/utils\";\r\nimport { Button } from \"../button/Button\";\r\nimport { Time, TimePickerContent } from \"./TimePickerContent\";\r\nimport { Popover, PopoverContent, PopoverTrigger } from \"../popover/Popover\";\r\n\r\ntype DesktopTimePickerProps = HTMLAttributes<HTMLButtonElement> & {\r\n  time: Time | undefined;\r\n  onTimeChange: (time: Time | undefined) => void;\r\n  placeholder?: string;\r\n  disabled?: boolean;\r\n  slotsProps?: {\r\n    content?: HTMLAttributes<HTMLDivElement>;\r\n  };\r\n};\r\n\r\nconst DesktopTimePicker: React.FC<DesktopTimePickerProps> = ({\r\n  time,\r\n  onTimeChange,\r\n  className,\r\n  slotsProps,\r\n  placeholder = \"Pick a Time\",\r\n  ...restProps\r\n}) => {\r\n  const [isOpen, setIsOpen] = useState(false);\r\n\r\n  return (\r\n    <Popover open={isOpen} onOpenChange={setIsOpen}>\r\n      <PopoverTrigger asChild>\r\n        <Button\r\n          variant={\"outline\"}\r\n          className={cn(\"w-full border-gray-300 text-text focus:ring-0 active:ring-transparent justify-start disabled:bg-gray-100\", className)}\r\n          aria-label={time?.hour ? `Selected time: ${time.hour}:${time.minute} ${time.ampm}` : placeholder}\r\n          {...restProps}\r\n        >\r\n          {`${time?.hour?.toString()?.padStart(2, \"0\") ?? \"--\"} : ${time?.minute?.toString()?.padStart(2, \"0\") ?? \"--\"} ${time?.ampm ?? \"--\"}`}\r\n        </Button>\r\n      </PopoverTrigger>\r\n      <PopoverContent {...(slotsProps?.content ?? {})} className={cn(\"w-auto p-0\", slotsProps?.content?.className)}>\r\n        <TimePickerContent isOpen={isOpen} onTimeChange={onTimeChange} time={time} slotsProps={slotsProps} />\r\n      </PopoverContent>\r\n    </Popover>\r\n  );\r\n};\r\nexport { DesktopTimePicker, type DesktopTimePickerProps };\r\n"],"names":["DesktopTimePicker","time","onTimeChange","className","slotsProps","placeholder","restProps","isOpen","setIsOpen","useState","jsxs","Popover","jsx","PopoverTrigger","Button","cn","PopoverContent","TimePickerContent"],"mappings":";;;;;;AAiBA,MAAMA,IAAsD,CAAC;AAAA,EAC3D,MAAAC;AAAA,EACA,cAAAC;AAAA,EACA,WAAAC;AAAA,EACA,YAAAC;AAAA,EACA,aAAAC,IAAc;AAAA,EACd,GAAGC;AACL,MAAM;AACJ,QAAM,CAACC,GAAQC,CAAS,IAAIC,EAAS,EAAK;AAE1C,SACG,gBAAAC,EAAAC,GAAA,EAAQ,MAAMJ,GAAQ,cAAcC,GACnC,UAAA;AAAA,IAAC,gBAAAI,EAAAC,GAAA,EAAe,SAAO,IACrB,UAAA,gBAAAD;AAAA,MAACE;AAAA,MAAA;AAAA,QACC,SAAS;AAAA,QACT,WAAWC,EAAG,4GAA4GZ,CAAS;AAAA,QACnI,cAAYF,GAAM,OAAO,kBAAkBA,EAAK,IAAI,IAAIA,EAAK,MAAM,IAAIA,EAAK,IAAI,KAAKI;AAAA,QACpF,GAAGC;AAAA,QAEH,UAAA,GAAGL,GAAM,MAAM,SAAA,GAAY,SAAS,GAAG,GAAG,KAAK,IAAI,MAAMA,GAAM,QAAQ,SAAA,GAAY,SAAS,GAAG,GAAG,KAAK,IAAI,IAAIA,GAAM,QAAQ,IAAI;AAAA,MAAA;AAAA,IAAA,GAEtI;AAAA,IACA,gBAAAW,EAACI,KAAgB,GAAIZ,GAAY,WAAW,CAAA,GAAK,WAAWW,EAAG,cAAcX,GAAY,SAAS,SAAS,GACzG,UAAC,gBAAAQ,EAAAK,GAAA,EAAkB,QAAAV,GAAgB,cAAAL,GAA4B,MAAAD,GAAY,YAAAG,GAAwB,EACrG,CAAA;AAAA,EAAA,GACF;AAEJ;"}

package/dist/formcheckbox.es.js

@@ -5,7 +5,7 @@ import { Checkbox as P } from "./checkbox.es.js";
 import { useCallback as N } from "react";
 import { cn as j } from "./utils.es.js";
 const U = (p) => {
-  const { name: t, control: a, defaultValue: m, disabled: s, rules: l, shouldUnregister: n, label: f, slotProps: e, required: c, ...h } = p, { field: i } = F({ name: t, control: a, rules: l, defaultValue: m, disabled: s, shouldUnregister: n }), u = N(
+  const { name: t, control: a, defaultValue: l, disabled: s, rules: m, shouldUnregister: n, label: f, slotProps: e, required: c, ...h } = p, { field: i } = F({ name: t, control: a, rules: m, defaultValue: l, disabled: s, shouldUnregister: n }), u = N(
     (o) => {
       i.onChange(o);
     },
@@ -16,9 +16,9 @@ const U = (p) => {
     {
       control: a,
       name: t,
-      defaultValue: m,
+      defaultValue: l,
       disabled: s,
-      rules: l,
+      rules: m,
       shouldUnregister: n,
       render: ({ field: o }) => /* @__PURE__ */ d(C, { ...h, className: "flex items-center gap-2 justify-start space-y-0", children: [
         /* @__PURE__ */ r(b, { ...e?.formControlProps ?? {}, children: /* @__PURE__ */ r(
@@ -34,7 +34,7 @@ const U = (p) => {
         ) }),
         /* @__PURE__ */ d(g, { ...e?.formLabelProps ?? {}, className: j("text-text", e?.formLabelProps?.className), children: [
           f,
-          c && /* @__PURE__ */ r("span", { className: "text-danger text-sm", children: "*" })
+          c && /* @__PURE__ */ r("span", { className: "text-danger text-sm leading-4", children: "*" })
         ] }),
         /* @__PURE__ */ r(k, { ...e?.formMessageProps ?? {} })
       ] })

package/dist/formcheckbox.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"formcheckbox.es.js","sources":["../src/components/form-checkbox/FormCheckbox.tsx"],"sourcesContent":["import { FormControl, FormField, FormItem, FormLabel, FormMessage } from \"../form/Form\";\r\nimport { SlotProps } from \"@radix-ui/react-slot\";\r\nimport { Control, ControllerProps, FieldPath, FieldValues, useController } from \"react-hook-form\";\r\nimport { Checkbox, CheckboxProps } from \"../checkbox/Checkbox\";\r\nimport { useCallback } from \"react\";\r\nimport { cn } from \"../../lib/utils\";\r\n\r\ntype FormCheckboxProps<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>> = Omit<\r\n  ControllerProps<TFieldValues, TName>,\r\n  \"render\"\r\n> &\r\n  React.ComponentProps<typeof FormItem> & {\r\n    label: string;\r\n    control: Control<TFieldValues>;\r\n    required?: boolean;\r\n    slotProps?: {\r\n      formLabelProps?: React.HTMLAttributes<HTMLLabelElement> & React.RefAttributes<HTMLLabelElement>;\r\n      formMessageProps?: React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>;\r\n      formControlProps?: Omit<SlotProps & React.RefAttributes<HTMLElement>, \"ref\"> & React.RefAttributes<HTMLElement>;\r\n      checkboxProps?: CheckboxProps;\r\n    };\r\n  };\r\n\r\nconst FormCheckbox = <TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>>(props: FormCheckboxProps<TFieldValues, TName>) => {\r\n  const { name, control, defaultValue, disabled, rules, shouldUnregister, label, slotProps, required, ...formItemProps } = props;\r\n  const { field } = useController({ name, control, rules, defaultValue, disabled, shouldUnregister });\r\n\r\n  const handleCheckChanged = useCallback(\r\n    (checked: boolean) => {\r\n      field.onChange(checked);\r\n    },\r\n    [field],\r\n  );\r\n\r\n  return (\r\n    <FormField\r\n      control={control}\r\n      name={name}\r\n      defaultValue={defaultValue}\r\n      disabled={disabled}\r\n      rules={rules}\r\n      shouldUnregister={shouldUnregister}\r\n      render={({ field }) => {\r\n        return (\r\n          <FormItem {...formItemProps} className=\"flex items-center gap-2 justify-start space-y-0\">\r\n            <FormControl {...(slotProps?.formControlProps ?? {})}>\r\n              <Checkbox\r\n                {...(slotProps?.checkboxProps ?? {})}\r\n                {...field}\r\n                checked={field.value}\r\n                onCheckedChange={handleCheckChanged}\r\n                aria-required={required}\r\n                disabled={disabled}\r\n              />\r\n            </FormControl>\r\n            <FormLabel {...(slotProps?.formLabelProps ?? {})} className={cn(\"text-text\", slotProps?.formLabelProps?.className)}>\r\n              {label}\r\n              {required && <span className=\"text-danger text-sm\">*</span>}\r\n            </FormLabel>\r\n            <FormMessage {...(slotProps?.formMessageProps ?? {})} />\r\n          </FormItem>\r\n        );\r\n      }}\r\n    />\r\n  );\r\n};\r\nexport { FormCheckbox, type FormCheckboxProps };\r\n"],"names":["FormCheckbox","props","name","control","defaultValue","disabled","rules","shouldUnregister","label","slotProps","required","formItemProps","field","useController","handleCheckChanged","useCallback","checked","jsx","FormField","jsxs","FormItem","FormControl","Checkbox","FormLabel","cn","FormMessage"],"mappings":";;;;;;AAuBM,MAAAA,IAAe,CAA0EC,MAAkD;AAC/I,QAAM,EAAE,MAAAC,GAAM,SAAAC,GAAS,cAAAC,GAAc,UAAAC,GAAU,OAAAC,GAAO,kBAAAC,GAAkB,OAAAC,GAAO,WAAAC,GAAW,UAAAC,GAAU,GAAGC,EAAkB,IAAAV,GACnH,EAAE,OAAAW,EAAM,IAAIC,EAAc,EAAE,MAAAX,GAAM,SAAAC,GAAS,OAAAG,GAAO,cAAAF,GAAc,UAAAC,GAAU,kBAAAE,GAAkB,GAE5FO,IAAqBC;AAAA,IACzB,CAACC,MAAqB;AACpB,MAAAJ,EAAM,SAASI,CAAO;AAAA,IACxB;AAAA,IACA,CAACJ,CAAK;AAAA,EACR;AAGE,SAAA,gBAAAK;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,SAAAf;AAAA,MACA,MAAAD;AAAA,MACA,cAAAE;AAAA,MACA,UAAAC;AAAA,MACA,OAAAC;AAAA,MACA,kBAAAC;AAAA,MACA,QAAQ,CAAC,EAAE,OAAAK,QAEN,gBAAAO,EAAAC,GAAA,EAAU,GAAGT,GAAe,WAAU,mDACrC,UAAA;AAAA,QAAA,gBAAAM,EAACI,GAAa,EAAA,GAAIZ,GAAW,oBAAoB,CAAA,GAC/C,UAAA,gBAAAQ;AAAA,UAACK;AAAA,UAAA;AAAA,YACE,GAAIb,GAAW,iBAAiB,CAAC;AAAA,YACjC,GAAGG;AAAAA,YACJ,SAASA,EAAM;AAAA,YACf,iBAAiBE;AAAA,YACjB,iBAAeJ;AAAA,YACf,UAAAL;AAAA,UAAA;AAAA,QAAA,GAEJ;AAAA,QACC,gBAAAc,EAAAI,GAAA,EAAW,GAAId,GAAW,kBAAkB,CAAA,GAAK,WAAWe,EAAG,aAAaf,GAAW,gBAAgB,SAAS,GAC9G,UAAA;AAAA,UAAAD;AAAA,UACAE,KAAY,gBAAAO,EAAC,QAAK,EAAA,WAAU,uBAAsB,UAAC,IAAA,CAAA;AAAA,QAAA,GACtD;AAAA,0BACCQ,GAAa,EAAA,GAAIhB,GAAW,oBAAoB,CAAA,EAAK,CAAA;AAAA,MAAA,GACxD;AAAA,IAEJ;AAAA,EACF;AAEJ;"}
+{"version":3,"file":"formcheckbox.es.js","sources":["../src/components/form-checkbox/FormCheckbox.tsx"],"sourcesContent":["import { FormControl, FormField, FormItem, FormLabel, FormMessage } from \"../form/Form\";\r\nimport { SlotProps } from \"@radix-ui/react-slot\";\r\nimport { Control, ControllerProps, FieldPath, FieldValues, useController } from \"react-hook-form\";\r\nimport { Checkbox, CheckboxProps } from \"../checkbox/Checkbox\";\r\nimport { useCallback } from \"react\";\r\nimport { cn } from \"../../lib/utils\";\r\n\r\ntype FormCheckboxProps<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>> = Omit<\r\n  ControllerProps<TFieldValues, TName>,\r\n  \"render\"\r\n> &\r\n  React.ComponentProps<typeof FormItem> & {\r\n    label: string;\r\n    control: Control<TFieldValues>;\r\n    required?: boolean;\r\n    slotProps?: {\r\n      formLabelProps?: React.HTMLAttributes<HTMLLabelElement> & React.RefAttributes<HTMLLabelElement>;\r\n      formMessageProps?: React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>;\r\n      formControlProps?: Omit<SlotProps & React.RefAttributes<HTMLElement>, \"ref\"> & React.RefAttributes<HTMLElement>;\r\n      checkboxProps?: CheckboxProps;\r\n    };\r\n  };\r\n\r\nconst FormCheckbox = <TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>>(props: FormCheckboxProps<TFieldValues, TName>) => {\r\n  const { name, control, defaultValue, disabled, rules, shouldUnregister, label, slotProps, required, ...formItemProps } = props;\r\n  const { field } = useController({ name, control, rules, defaultValue, disabled, shouldUnregister });\r\n\r\n  const handleCheckChanged = useCallback(\r\n    (checked: boolean) => {\r\n      field.onChange(checked);\r\n    },\r\n    [field],\r\n  );\r\n\r\n  return (\r\n    <FormField\r\n      control={control}\r\n      name={name}\r\n      defaultValue={defaultValue}\r\n      disabled={disabled}\r\n      rules={rules}\r\n      shouldUnregister={shouldUnregister}\r\n      render={({ field }) => {\r\n        return (\r\n          <FormItem {...formItemProps} className=\"flex items-center gap-2 justify-start space-y-0\">\r\n            <FormControl {...(slotProps?.formControlProps ?? {})}>\r\n              <Checkbox\r\n                {...(slotProps?.checkboxProps ?? {})}\r\n                {...field}\r\n                checked={field.value}\r\n                onCheckedChange={handleCheckChanged}\r\n                aria-required={required}\r\n                disabled={disabled}\r\n              />\r\n            </FormControl>\r\n            <FormLabel {...(slotProps?.formLabelProps ?? {})} className={cn(\"text-text\", slotProps?.formLabelProps?.className)}>\r\n              {label}\r\n              {required && <span className=\"text-danger text-sm leading-4\">*</span>}\r\n            </FormLabel>\r\n            <FormMessage {...(slotProps?.formMessageProps ?? {})} />\r\n          </FormItem>\r\n        );\r\n      }}\r\n    />\r\n  );\r\n};\r\nexport { FormCheckbox, type FormCheckboxProps };\r\n"],"names":["FormCheckbox","props","name","control","defaultValue","disabled","rules","shouldUnregister","label","slotProps","required","formItemProps","field","useController","handleCheckChanged","useCallback","checked","jsx","FormField","jsxs","FormItem","FormControl","Checkbox","FormLabel","cn","FormMessage"],"mappings":";;;;;;AAuBM,MAAAA,IAAe,CAA0EC,MAAkD;AAC/I,QAAM,EAAE,MAAAC,GAAM,SAAAC,GAAS,cAAAC,GAAc,UAAAC,GAAU,OAAAC,GAAO,kBAAAC,GAAkB,OAAAC,GAAO,WAAAC,GAAW,UAAAC,GAAU,GAAGC,EAAkB,IAAAV,GACnH,EAAE,OAAAW,EAAM,IAAIC,EAAc,EAAE,MAAAX,GAAM,SAAAC,GAAS,OAAAG,GAAO,cAAAF,GAAc,UAAAC,GAAU,kBAAAE,GAAkB,GAE5FO,IAAqBC;AAAA,IACzB,CAACC,MAAqB;AACpB,MAAAJ,EAAM,SAASI,CAAO;AAAA,IACxB;AAAA,IACA,CAACJ,CAAK;AAAA,EACR;AAGE,SAAA,gBAAAK;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,SAAAf;AAAA,MACA,MAAAD;AAAA,MACA,cAAAE;AAAA,MACA,UAAAC;AAAA,MACA,OAAAC;AAAA,MACA,kBAAAC;AAAA,MACA,QAAQ,CAAC,EAAE,OAAAK,QAEN,gBAAAO,EAAAC,GAAA,EAAU,GAAGT,GAAe,WAAU,mDACrC,UAAA;AAAA,QAAA,gBAAAM,EAACI,GAAa,EAAA,GAAIZ,GAAW,oBAAoB,CAAA,GAC/C,UAAA,gBAAAQ;AAAA,UAACK;AAAA,UAAA;AAAA,YACE,GAAIb,GAAW,iBAAiB,CAAC;AAAA,YACjC,GAAGG;AAAAA,YACJ,SAASA,EAAM;AAAA,YACf,iBAAiBE;AAAA,YACjB,iBAAeJ;AAAA,YACf,UAAAL;AAAA,UAAA;AAAA,QAAA,GAEJ;AAAA,QACC,gBAAAc,EAAAI,GAAA,EAAW,GAAId,GAAW,kBAAkB,CAAA,GAAK,WAAWe,EAAG,aAAaf,GAAW,gBAAgB,SAAS,GAC9G,UAAA;AAAA,UAAAD;AAAA,UACAE,KAAY,gBAAAO,EAAC,QAAK,EAAA,WAAU,iCAAgC,UAAC,IAAA,CAAA;AAAA,QAAA,GAChE;AAAA,0BACCQ,GAAa,EAAA,GAAIhB,GAAW,oBAAoB,CAAA,EAAK,CAAA;AAAA,MAAA,GACxD;AAAA,IAEJ;AAAA,EACF;AAEJ;"}

package/dist/formcombobox.es.js

@@ -21,10 +21,10 @@ const ro = (N) => {
     emptyOptionsText: v,
     placeholder: I,
     slotProps: e,
-    required: h,
+    required: g,
     ...y
-  } = N, { field: m } = j({ name: d, control: b, rules: u, defaultValue: p, disabled: l, shouldUnregister: x }), [F, g] = w(!1), S = (t) => {
-    m.onChange(t), g(!1);
+  } = N, { field: m } = j({ name: d, control: b, rules: u, defaultValue: p, disabled: l, shouldUnregister: x }), [F, h] = w(!1), S = (t) => {
+    m.onChange(t), h(!1);
   }, T = L(() => n.find((t) => t.value === m.value), [m.value, n]);
   return /* @__PURE__ */ o(
     B,
@@ -38,16 +38,16 @@ const ro = (N) => {
       render: ({ field: t }) => /* @__PURE__ */ r(D, { ...y, children: [
         /* @__PURE__ */ r(U, { ...e?.formLabelProps ?? {}, children: [
           f,
-          h && /* @__PURE__ */ o("span", { className: "text-danger text-sm", children: "*" })
+          g && /* @__PURE__ */ o("span", { className: "text-danger text-sm leading-4", children: "*" })
         ] }),
-        /* @__PURE__ */ r(A, { ...e?.comboboxProps ?? {}, open: F, onOpenChange: g, children: [
+        /* @__PURE__ */ r(A, { ...e?.comboboxProps ?? {}, open: F, onOpenChange: h, children: [
           /* @__PURE__ */ o(_, { children: /* @__PURE__ */ o(
             G,
             {
               className: i("*:truncate [&>span]:inline-block", e?.comboboxTriggerProps?.className),
               disabled: l ?? a,
               asChild: !0,
-              "aria-required": h,
+              "aria-required": g,
               ...e?.comboboxTriggerProps ?? {},
               children: /* @__PURE__ */ o(
                 q,

package/dist/formcombobox.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"formcombobox.es.js","sources":["../src/components/form-combobox/FormCombobox.tsx"],"sourcesContent":["import { useMemo, useState } from \"react\";\r\nimport { Check, ChevronDown, Spinner } from \"@trsys-tech/matrix-icons\";\r\nimport { ControllerProps, FieldPath, FieldValues, useController } from \"react-hook-form\";\r\n\r\nimport { cn } from \"../../lib/utils\";\r\nimport { Button, ButtonProps } from \"../button/Button\";\r\nimport { FormControl, FormField, FormItem, FormLabel, FormMessage } from \"../form/Form\";\r\nimport { Combobox, ComboboxContent, ComboboxEmpty, ComboboxInput, ComboboxItem, ComboboxList, ComboboxTrigger } from \"../combobox/Combobox\";\r\n\r\ntype FormComboboxProps<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> = Omit<\r\n  ControllerProps<TFieldValues, TName>,\r\n  \"render\"\r\n> &\r\n  React.ComponentProps<typeof FormItem> & {\r\n    label: string;\r\n    options: { value: string | number; label: string | number }[];\r\n    loading?: boolean;\r\n    loadingText?: string;\r\n    emptyOptionsText?: string;\r\n    placeholder?: string;\r\n    required?: boolean;\r\n    slotProps?: {\r\n      formLabelProps?: React.HTMLAttributes<HTMLLabelElement> & React.RefAttributes<HTMLLabelElement>;\r\n      formMessageProps?: React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>;\r\n      comboboxProps?: React.ComponentProps<typeof Combobox>;\r\n      comboboxTriggerProps?: React.ComponentProps<typeof ComboboxTrigger>;\r\n      comboboxValueProps?: ButtonProps;\r\n      comboboxContentProps?: React.ComponentProps<typeof ComboboxContent>;\r\n      comboboxItemProps?: React.ComponentProps<typeof ComboboxItem>;\r\n    };\r\n  };\r\n\r\nconst FormCombobox = <TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>(\r\n  props: FormComboboxProps<TFieldValues, TName>,\r\n) => {\r\n  const {\r\n    name,\r\n    control,\r\n    defaultValue,\r\n    disabled,\r\n    rules,\r\n    shouldUnregister,\r\n    label,\r\n    options,\r\n    loading,\r\n    loadingText,\r\n    emptyOptionsText,\r\n    placeholder,\r\n    slotProps,\r\n    required,\r\n    ...formItemProps\r\n  } = props;\r\n\r\n  const { field } = useController({ name, control, rules, defaultValue, disabled, shouldUnregister });\r\n  const [open, setOpen] = useState(false);\r\n\r\n  const handleChange = (value: string | number) => {\r\n    field.onChange(value);\r\n    setOpen(false);\r\n  };\r\n\r\n  const value = useMemo(() => options.find(option => option.value === field.value), [field.value, options]);\r\n\r\n  return (\r\n    <FormField\r\n      control={control}\r\n      name={name}\r\n      defaultValue={defaultValue}\r\n      disabled={disabled}\r\n      rules={rules}\r\n      shouldUnregister={shouldUnregister}\r\n      render={({ field }) => {\r\n        return (\r\n          <FormItem {...formItemProps}>\r\n            <FormLabel {...(slotProps?.formLabelProps ?? {})}>\r\n              {label}\r\n              {required && <span className=\"text-danger text-sm\">*</span>}\r\n            </FormLabel>\r\n            <Combobox {...(slotProps?.comboboxProps ?? {})} open={open} onOpenChange={setOpen}>\r\n              <FormControl>\r\n                <ComboboxTrigger\r\n                  className={cn(\"*:truncate [&>span]:inline-block\", slotProps?.comboboxTriggerProps?.className)}\r\n                  disabled={disabled ?? loading}\r\n                  asChild\r\n                  aria-required={required}\r\n                  {...(slotProps?.comboboxTriggerProps ?? {})}\r\n                >\r\n                  <Button\r\n                    variant=\"text\"\r\n                    {...(slotProps?.comboboxValueProps ?? {})}\r\n                    className={cn(\r\n                      \"group flex h-9 w-full border text-sm border-gray-300 disabled:bg-gray-100\",\r\n                      slotProps?.comboboxValueProps?.className,\r\n                    )}\r\n                    endIcon={\r\n                      <ChevronDown\r\n                        role=\"button\"\r\n                        aria-label=\"Expand dropdown\"\r\n                        className=\"ms-auto h-5 w-5 !text-muted-foreground cursor-pointer group-data-[state=open]:rotate-180 transition-transform\"\r\n                      />\r\n                    }\r\n                    loading={loading}\r\n                  >\r\n                    {loading && loadingText ? (\r\n                      <span className=\"text-muted-foreground\">{loadingText}</span>\r\n                    ) : (\r\n                      value?.label || <span className=\"text-muted-foreground\">{placeholder || label}</span>\r\n                    )}\r\n                  </Button>\r\n                </ComboboxTrigger>\r\n              </FormControl>\r\n              <ComboboxContent {...(slotProps?.comboboxContentProps ?? {})}>\r\n                <ComboboxInput placeholder=\"Search for a car...\" />\r\n                <ComboboxList>\r\n                  {loading && (\r\n                    <ComboboxEmpty>\r\n                      <Spinner className=\"inline-block mb-0.5\" /> {loadingText || \"Loading...\"}\r\n                    </ComboboxEmpty>\r\n                  )}\r\n                  {!loading && !options.length ? (\r\n                    <ComboboxItem\r\n                      {...(slotProps?.comboboxItemProps ?? {})}\r\n                      value=\"8fdcaeb67c8ad943c80fe54c3b1059b700d9254389a38a4a1fc39a6eee7564623\"\r\n                      disabled\r\n                    >\r\n                      {emptyOptionsText || \"No Items\"}\r\n                    </ComboboxItem>\r\n                  ) : null}\r\n                  {options?.map(({ value, label }, index) => (\r\n                    <ComboboxItem\r\n                      {...(slotProps?.comboboxItemProps ?? {})}\r\n                      value={String(value)}\r\n                      key={index + \"_\" + label}\r\n                      onSelect={() => handleChange(value)}\r\n                    >\r\n                      {label}\r\n                      <Check className={cn(\"ml-auto\", value === field.value ? \"opacity-100\" : \"opacity-0\")} />\r\n                    </ComboboxItem>\r\n                  ))}\r\n                </ComboboxList>\r\n              </ComboboxContent>\r\n            </Combobox>\r\n            <FormMessage {...(slotProps?.formMessageProps ?? {})} />\r\n          </FormItem>\r\n        );\r\n      }}\r\n    />\r\n  );\r\n};\r\nexport { FormCombobox, type FormComboboxProps };\r\n"],"names":["FormCombobox","props","name","control","defaultValue","disabled","rules","shouldUnregister","label","options","loading","loadingText","emptyOptionsText","placeholder","slotProps","required","formItemProps","field","useController","open","setOpen","useState","handleChange","value","useMemo","option","jsx","FormField","jsxs","FormItem","FormLabel","Combobox","FormControl","ComboboxTrigger","cn","Button","ChevronDown","ComboboxContent","ComboboxInput","ComboboxList","ComboboxEmpty","Spinner","ComboboxItem","index","createElement","Check","FormMessage"],"mappings":"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"}
+{"version":3,"file":"formcombobox.es.js","sources":["../src/components/form-combobox/FormCombobox.tsx"],"sourcesContent":["import { useMemo, useState } from \"react\";\r\nimport { Check, ChevronDown, Spinner } from \"@trsys-tech/matrix-icons\";\r\nimport { ControllerProps, FieldPath, FieldValues, useController } from \"react-hook-form\";\r\n\r\nimport { cn } from \"../../lib/utils\";\r\nimport { Button, ButtonProps } from \"../button/Button\";\r\nimport { FormControl, FormField, FormItem, FormLabel, FormMessage } from \"../form/Form\";\r\nimport { Combobox, ComboboxContent, ComboboxEmpty, ComboboxInput, ComboboxItem, ComboboxList, ComboboxTrigger } from \"../combobox/Combobox\";\r\n\r\ntype FormComboboxProps<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> = Omit<\r\n  ControllerProps<TFieldValues, TName>,\r\n  \"render\"\r\n> &\r\n  React.ComponentProps<typeof FormItem> & {\r\n    label: string;\r\n    options: { value: string | number; label: string | number }[];\r\n    loading?: boolean;\r\n    loadingText?: string;\r\n    emptyOptionsText?: string;\r\n    placeholder?: string;\r\n    required?: boolean;\r\n    slotProps?: {\r\n      formLabelProps?: React.HTMLAttributes<HTMLLabelElement> & React.RefAttributes<HTMLLabelElement>;\r\n      formMessageProps?: React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>;\r\n      comboboxProps?: React.ComponentProps<typeof Combobox>;\r\n      comboboxTriggerProps?: React.ComponentProps<typeof ComboboxTrigger>;\r\n      comboboxValueProps?: ButtonProps;\r\n      comboboxContentProps?: React.ComponentProps<typeof ComboboxContent>;\r\n      comboboxItemProps?: React.ComponentProps<typeof ComboboxItem>;\r\n    };\r\n  };\r\n\r\nconst FormCombobox = <TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>(\r\n  props: FormComboboxProps<TFieldValues, TName>,\r\n) => {\r\n  const {\r\n    name,\r\n    control,\r\n    defaultValue,\r\n    disabled,\r\n    rules,\r\n    shouldUnregister,\r\n    label,\r\n    options,\r\n    loading,\r\n    loadingText,\r\n    emptyOptionsText,\r\n    placeholder,\r\n    slotProps,\r\n    required,\r\n    ...formItemProps\r\n  } = props;\r\n\r\n  const { field } = useController({ name, control, rules, defaultValue, disabled, shouldUnregister });\r\n  const [open, setOpen] = useState(false);\r\n\r\n  const handleChange = (value: string | number) => {\r\n    field.onChange(value);\r\n    setOpen(false);\r\n  };\r\n\r\n  const value = useMemo(() => options.find(option => option.value === field.value), [field.value, options]);\r\n\r\n  return (\r\n    <FormField\r\n      control={control}\r\n      name={name}\r\n      defaultValue={defaultValue}\r\n      disabled={disabled}\r\n      rules={rules}\r\n      shouldUnregister={shouldUnregister}\r\n      render={({ field }) => {\r\n        return (\r\n          <FormItem {...formItemProps}>\r\n            <FormLabel {...(slotProps?.formLabelProps ?? {})}>\r\n              {label}\r\n              {required && <span className=\"text-danger text-sm leading-4\">*</span>}\r\n            </FormLabel>\r\n            <Combobox {...(slotProps?.comboboxProps ?? {})} open={open} onOpenChange={setOpen}>\r\n              <FormControl>\r\n                <ComboboxTrigger\r\n                  className={cn(\"*:truncate [&>span]:inline-block\", slotProps?.comboboxTriggerProps?.className)}\r\n                  disabled={disabled ?? loading}\r\n                  asChild\r\n                  aria-required={required}\r\n                  {...(slotProps?.comboboxTriggerProps ?? {})}\r\n                >\r\n                  <Button\r\n                    variant=\"text\"\r\n                    {...(slotProps?.comboboxValueProps ?? {})}\r\n                    className={cn(\r\n                      \"group flex h-9 w-full border text-sm border-gray-300 disabled:bg-gray-100\",\r\n                      slotProps?.comboboxValueProps?.className,\r\n                    )}\r\n                    endIcon={\r\n                      <ChevronDown\r\n                        role=\"button\"\r\n                        aria-label=\"Expand dropdown\"\r\n                        className=\"ms-auto h-5 w-5 !text-muted-foreground cursor-pointer group-data-[state=open]:rotate-180 transition-transform\"\r\n                      />\r\n                    }\r\n                    loading={loading}\r\n                  >\r\n                    {loading && loadingText ? (\r\n                      <span className=\"text-muted-foreground\">{loadingText}</span>\r\n                    ) : (\r\n                      value?.label || <span className=\"text-muted-foreground\">{placeholder || label}</span>\r\n                    )}\r\n                  </Button>\r\n                </ComboboxTrigger>\r\n              </FormControl>\r\n              <ComboboxContent {...(slotProps?.comboboxContentProps ?? {})}>\r\n                <ComboboxInput placeholder=\"Search for a car...\" />\r\n                <ComboboxList>\r\n                  {loading && (\r\n                    <ComboboxEmpty>\r\n                      <Spinner className=\"inline-block mb-0.5\" /> {loadingText || \"Loading...\"}\r\n                    </ComboboxEmpty>\r\n                  )}\r\n                  {!loading && !options.length ? (\r\n                    <ComboboxItem\r\n                      {...(slotProps?.comboboxItemProps ?? {})}\r\n                      value=\"8fdcaeb67c8ad943c80fe54c3b1059b700d9254389a38a4a1fc39a6eee7564623\"\r\n                      disabled\r\n                    >\r\n                      {emptyOptionsText || \"No Items\"}\r\n                    </ComboboxItem>\r\n                  ) : null}\r\n                  {options?.map(({ value, label }, index) => (\r\n                    <ComboboxItem\r\n                      {...(slotProps?.comboboxItemProps ?? {})}\r\n                      value={String(value)}\r\n                      key={index + \"_\" + label}\r\n                      onSelect={() => handleChange(value)}\r\n                    >\r\n                      {label}\r\n                      <Check className={cn(\"ml-auto\", value === field.value ? \"opacity-100\" : \"opacity-0\")} />\r\n                    </ComboboxItem>\r\n                  ))}\r\n                </ComboboxList>\r\n              </ComboboxContent>\r\n            </Combobox>\r\n            <FormMessage {...(slotProps?.formMessageProps ?? {})} />\r\n          </FormItem>\r\n        );\r\n      }}\r\n    />\r\n  );\r\n};\r\nexport { FormCombobox, type FormComboboxProps };\r\n"],"names":["FormCombobox","props","name","control","defaultValue","disabled","rules","shouldUnregister","label","options","loading","loadingText","emptyOptionsText","placeholder","slotProps","required","formItemProps","field","useController","open","setOpen","useState","handleChange","value","useMemo","option","jsx","FormField","jsxs","FormItem","FormLabel","Combobox","FormControl","ComboboxTrigger","cn","Button","ChevronDown","ComboboxContent","ComboboxInput","ComboboxList","ComboboxEmpty","Spinner","ComboboxItem","index","createElement","Check","FormMessage"],"mappings":"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"}

package/dist/formdatepicker.es.js

@@ -1,24 +1,24 @@
-import { jsx as r, jsxs as s } from "react/jsx-runtime";
-import { FormField as P, FormItem as f, FormLabel as F, FormControl as h, FormMessage as g } from "./form.es.js";
+import { jsx as e, jsxs as t } from "react/jsx-runtime";
+import { FormField as P, FormItem as f, FormLabel as F, FormControl as g, FormMessage as h } from "./form.es.js";
 import { DatePicker as x } from "./datepicker.es.js";
-const j = (t) => {
-  const { name: l, control: m, defaultValue: n, disabled: a, rules: c, shouldUnregister: d, label: i, slotProps: e, required: p, ...u } = t;
-  return /* @__PURE__ */ r(
+const j = (l) => {
+  const { name: m, control: n, defaultValue: a, disabled: o, rules: d, shouldUnregister: i, label: c, slotProps: r, required: p, ...u } = l;
+  return /* @__PURE__ */ e(
     P,
     {
-      control: m,
-      name: l,
-      defaultValue: n,
-      disabled: a,
-      rules: c,
-      shouldUnregister: d,
-      render: ({ field: o }) => /* @__PURE__ */ s(f, { ...u, children: [
-        /* @__PURE__ */ s(F, { ...e?.formLabelProps ?? {}, children: [
-          i,
-          p && /* @__PURE__ */ r("span", { className: "text-danger text-sm", children: "*" })
+      control: n,
+      name: m,
+      defaultValue: a,
+      disabled: o,
+      rules: d,
+      shouldUnregister: i,
+      render: ({ field: s }) => /* @__PURE__ */ t(f, { ...u, children: [
+        /* @__PURE__ */ t(F, { ...r?.formLabelProps ?? {}, children: [
+          c,
+          p && /* @__PURE__ */ e("span", { className: "text-danger text-sm leading-4", children: "*" })
         ] }),
-        /* @__PURE__ */ r(h, { ...e?.formControlProps ?? {}, children: /* @__PURE__ */ r(x, { ...e?.datepickerProps ?? {}, selected: o.value, onSelect: o.onChange }) }),
-        /* @__PURE__ */ r(g, { ...e?.formMessageProps ?? {} })
+        /* @__PURE__ */ e(g, { ...r?.formControlProps ?? {}, children: /* @__PURE__ */ e(x, { ...r?.datepickerProps ?? {}, selected: s.value, onSelect: s.onChange, disabled: o }) }),
+        /* @__PURE__ */ e(h, { ...r?.formMessageProps ?? {} })
       ] })
     }
   );