periplo-ui 3.27.1 → 3.27.3

package/dist/components/DataTable/components/DataTableToolbar.js

@@ -50,7 +50,7 @@ function DataTableToolbar({
   if (!showColumnVisibilityControls && !primaryFilters && !secondaryFilters && !selection) {
     return null;
   }
-  return /* @__PURE__ */ jsxs("div", { className: "flex flex-shrink-0 flex-col gap-2 p-1", children: [
+  return /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 flex-col gap-2 p-1", children: [
     !isMobile && primaryFilters && /* @__PURE__ */ jsx("div", { className: "flex flex-wrap items-center gap-2", children: primaryFilters }),
     /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
       /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2", children: selection && /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2", children: selection.isSelectionStarted ? /* @__PURE__ */ jsxs(Fragment, { children: [

package/dist/components/DataTable/components/DataTableToolbar.js.map

@@ -1 +1 @@
-{"version":3,"file":"DataTableToolbar.js","sources":["../../../../src/components/DataTable/components/DataTableToolbar.tsx"],"sourcesContent":["import { TextColumns, FunnelSimple, X, SelectionAll } from '@phosphor-icons/react'\nimport { Table } from '@tanstack/react-table'\nimport * as React from 'react'\n\nimport { Badge } from '../../Badge'\nimport { Button } from '../../Button'\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from '../../DropdownMenu'\nimport { PopoverContent, PopoverRoot, PopoverTrigger } from '../../Popover'\nimport { Typography } from '../../Typography'\n\nimport { TooltipContent, TooltipProvider, TooltipRoot, TooltipTrigger } from '@/components/Tooltip'\nimport { useIsMobile } from '@/lib/useMobile'\nimport { cn } from '@/lib/utils'\n\ntype DataTableToolbarProps<TData> = {\n  readonly table: Table<TData>\n  readonly showColumnVisibilityControls?: boolean\n  readonly primaryFilters?: React.ReactNode\n  readonly secondaryFilters?: React.ReactNode\n  readonly activePrimaryFiltersCount?: number\n  readonly activeSecondaryFiltersCount?: number\n  readonly labels?: {\n    columnVisibilityButton?: string\n    columnVisibilitySelectAll?: string\n    filters?: string\n    moreFilters?: string\n  }\n  readonly selection?: {\n    isSelectionStarted?: boolean\n    onSelectionStart?: () => void\n    onSelectionCancel?: () => void\n    selectionSummary?: string | null\n    isSelectionDisabled?: boolean\n    labels?: {\n      startSelection?: string\n      cancelSelection?: string\n      selectionSummary?: string\n      selectionDisabledTooltip?: string\n    }\n  }\n}\n\nconst defaultLabels = {\n  columnVisibilityButton: 'Hide columns',\n  columnVisibilitySelectAll: 'Select all',\n  filters: 'Filters',\n  moreFilters: 'More filters',\n  startSelection: 'Start selection',\n  cancelSelection: 'Cancel selection',\n}\n\nconst defaultSelectionLabels = {\n  startSelection: 'Start selection',\n  cancelSelection: 'Cancel selection',\n}\n\nexport function DataTableToolbar<TData>({\n  table,\n  showColumnVisibilityControls = true,\n  primaryFilters,\n  secondaryFilters,\n  activePrimaryFiltersCount = 0,\n  activeSecondaryFiltersCount = 0,\n  selection,\n  labels: labelsProp,\n}: DataTableToolbarProps<TData>) {\n  const isMobile = useIsMobile()\n\n  const labels = {\n    ...defaultLabels,\n    ...labelsProp,\n  }\n\n  const selectionLabels = {\n    ...defaultSelectionLabels,\n    ...selection?.labels,\n  }\n\n  const hasPrimaryFilters = !!primaryFilters\n  const hasSecondaryFilters = !!secondaryFilters\n\n  const showFiltersButton = isMobile ? hasPrimaryFilters || hasSecondaryFilters : hasSecondaryFilters\n\n  const totalActiveFiltersCount = activePrimaryFiltersCount + activeSecondaryFiltersCount\n  const activeFiltersCount = isMobile ? totalActiveFiltersCount : activeSecondaryFiltersCount\n  const showBadge = activeFiltersCount > 0\n\n  const filtersButtonLabel = !hasPrimaryFilters || isMobile ? labels.filters : labels.moreFilters\n\n  if (!showColumnVisibilityControls && !primaryFilters && !secondaryFilters && !selection) {\n    return null\n  }\n\n  return (\n    <div className=\"flex flex-shrink-0 flex-col gap-2 p-1\">\n      {!isMobile && primaryFilters && <div className=\"flex flex-wrap items-center gap-2\">{primaryFilters}</div>}\n\n      <div className=\"flex items-center justify-between\">\n        <div className=\"flex items-center gap-2\">\n          {selection && (\n            <div className=\"flex items-center gap-2\">\n              {selection.isSelectionStarted ? (\n                <>\n                  <Button variant=\"text\" size=\"sm\" StartIcon={X} onClick={selection.onSelectionCancel}>\n                    {selectionLabels.cancelSelection}\n                  </Button>\n                  {selection.selectionSummary && !isMobile && (\n                    <Typography variant=\"body-sm\" className=\"text-neutral-600\">\n                      {selection.selectionSummary}\n                    </Typography>\n                  )}\n                </>\n              ) : (\n                <TooltipProvider>\n                  <TooltipRoot delayDuration={200}>\n                    <TooltipTrigger asChild>\n                      <div>\n                        <Button\n                          variant=\"text\"\n                          size=\"sm\"\n                          StartIcon={SelectionAll}\n                          onClick={selection.onSelectionStart}\n                          disabled={selection.isSelectionDisabled}\n                        >\n                          {selectionLabels.startSelection}\n                        </Button>\n                      </div>\n                    </TooltipTrigger>\n                    {selection.labels?.selectionDisabledTooltip && selection.isSelectionDisabled && (\n                      <TooltipContent>{selection.labels.selectionDisabledTooltip}</TooltipContent>\n                    )}\n                  </TooltipRoot>\n                </TooltipProvider>\n              )}\n            </div>\n          )}\n        </div>\n\n        <div className=\"flex items-center gap-2\">\n          {/* eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing */}\n          {showFiltersButton && (\n            <PopoverRoot>\n              <PopoverTrigger asChild>\n                <Button variant=\"text\" size=\"sm\" StartIcon={FunnelSimple} className=\"relative whitespace-nowrap\">\n                  {showBadge && (\n                    <Badge\n                      count={activeFiltersCount}\n                      color=\"primary\"\n                      ping={false}\n                      className=\"absolute -top-1 -right-1\"\n                    />\n                  )}\n                  {filtersButtonLabel}\n                </Button>\n              </PopoverTrigger>\n              <PopoverContent\n                align=\"center\"\n                className={cn('w-fit p-4', isMobile && 'max-h-[80vh] w-[95vw] overflow-y-auto')}\n              >\n                <div className=\"flex flex-col gap-4\">\n                  {isMobile && primaryFilters}\n                  {secondaryFilters}\n                </div>\n              </PopoverContent>\n            </PopoverRoot>\n          )}\n          {showColumnVisibilityControls && (\n            <DropdownMenu>\n              <DropdownMenuTrigger asChild>\n                <Button variant=\"text\" size=\"sm\" className={cn('whitespace-nowrap')} StartIcon={TextColumns}>\n                  {labels.columnVisibilityButton}\n                </Button>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent>\n                <DropdownMenuCheckboxItem\n                  key={'all-columns'}\n                  className=\"capitalize\"\n                  checked={table.getAllColumns().every((column) => column.getIsVisible())}\n                  onSelect={(event) => event.preventDefault()}\n                  onCheckedChange={(value) =>\n                    table.getAllColumns().forEach((column) => column.toggleVisibility(!!value))\n                  }\n                >\n                  {labels.columnVisibilitySelectAll}\n                </DropdownMenuCheckboxItem>\n                <DropdownMenuSeparator className=\"bg-neutral-100\" />\n                {table\n                  .getAllColumns()\n                  .filter((column) => column.getCanHide() && column.id !== 'select')\n                  .map((column) => {\n                    return (\n                      <DropdownMenuCheckboxItem\n                        key={column.id}\n                        className=\"capitalize\"\n                        checked={column.getIsVisible()}\n                        onSelect={(event) => event.preventDefault()}\n                        onCheckedChange={(value) => column.toggleVisibility(!!value)}\n                      >\n                        {column.columnDef.header?.toString()}\n                      </DropdownMenuCheckboxItem>\n                    )\n                  })}\n              </DropdownMenuContent>\n            </DropdownMenu>\n          )}\n        </div>\n      </div>\n    </div>\n  )\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"DataTableToolbar.js","sources":["../../../../src/components/DataTable/components/DataTableToolbar.tsx"],"sourcesContent":["import { TextColumns, FunnelSimple, X, SelectionAll } from '@phosphor-icons/react'\nimport { Table } from '@tanstack/react-table'\nimport * as React from 'react'\n\nimport { Badge } from '../../Badge'\nimport { Button } from '../../Button'\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from '../../DropdownMenu'\nimport { PopoverContent, PopoverRoot, PopoverTrigger } from '../../Popover'\nimport { Typography } from '../../Typography'\n\nimport { TooltipContent, TooltipProvider, TooltipRoot, TooltipTrigger } from '@/components/Tooltip'\nimport { useIsMobile } from '@/lib/useMobile'\nimport { cn } from '@/lib/utils'\n\ntype DataTableToolbarProps<TData> = {\n  readonly table: Table<TData>\n  readonly showColumnVisibilityControls?: boolean\n  readonly primaryFilters?: React.ReactNode\n  readonly secondaryFilters?: React.ReactNode\n  readonly activePrimaryFiltersCount?: number\n  readonly activeSecondaryFiltersCount?: number\n  readonly labels?: {\n    columnVisibilityButton?: string\n    columnVisibilitySelectAll?: string\n    filters?: string\n    moreFilters?: string\n  }\n  readonly selection?: {\n    isSelectionStarted?: boolean\n    onSelectionStart?: () => void\n    onSelectionCancel?: () => void\n    selectionSummary?: string | null\n    isSelectionDisabled?: boolean\n    labels?: {\n      startSelection?: string\n      cancelSelection?: string\n      selectionSummary?: string\n      selectionDisabledTooltip?: string\n    }\n  }\n}\n\nconst defaultLabels = {\n  columnVisibilityButton: 'Hide columns',\n  columnVisibilitySelectAll: 'Select all',\n  filters: 'Filters',\n  moreFilters: 'More filters',\n  startSelection: 'Start selection',\n  cancelSelection: 'Cancel selection',\n}\n\nconst defaultSelectionLabels = {\n  startSelection: 'Start selection',\n  cancelSelection: 'Cancel selection',\n}\n\nexport function DataTableToolbar<TData>({\n  table,\n  showColumnVisibilityControls = true,\n  primaryFilters,\n  secondaryFilters,\n  activePrimaryFiltersCount = 0,\n  activeSecondaryFiltersCount = 0,\n  selection,\n  labels: labelsProp,\n}: DataTableToolbarProps<TData>) {\n  const isMobile = useIsMobile()\n\n  const labels = {\n    ...defaultLabels,\n    ...labelsProp,\n  }\n\n  const selectionLabels = {\n    ...defaultSelectionLabels,\n    ...selection?.labels,\n  }\n\n  const hasPrimaryFilters = !!primaryFilters\n  const hasSecondaryFilters = !!secondaryFilters\n\n  const showFiltersButton = isMobile ? hasPrimaryFilters || hasSecondaryFilters : hasSecondaryFilters\n\n  const totalActiveFiltersCount = activePrimaryFiltersCount + activeSecondaryFiltersCount\n  const activeFiltersCount = isMobile ? totalActiveFiltersCount : activeSecondaryFiltersCount\n  const showBadge = activeFiltersCount > 0\n\n  const filtersButtonLabel = !hasPrimaryFilters || isMobile ? labels.filters : labels.moreFilters\n\n  if (!showColumnVisibilityControls && !primaryFilters && !secondaryFilters && !selection) {\n    return null\n  }\n\n  return (\n    <div className=\"flex shrink-0 flex-col gap-2 p-1\">\n      {!isMobile && primaryFilters && <div className=\"flex flex-wrap items-center gap-2\">{primaryFilters}</div>}\n\n      <div className=\"flex items-center justify-between\">\n        <div className=\"flex items-center gap-2\">\n          {selection && (\n            <div className=\"flex items-center gap-2\">\n              {selection.isSelectionStarted ? (\n                <>\n                  <Button variant=\"text\" size=\"sm\" StartIcon={X} onClick={selection.onSelectionCancel}>\n                    {selectionLabels.cancelSelection}\n                  </Button>\n                  {selection.selectionSummary && !isMobile && (\n                    <Typography variant=\"body-sm\" className=\"text-neutral-600\">\n                      {selection.selectionSummary}\n                    </Typography>\n                  )}\n                </>\n              ) : (\n                <TooltipProvider>\n                  <TooltipRoot delayDuration={200}>\n                    <TooltipTrigger asChild>\n                      <div>\n                        <Button\n                          variant=\"text\"\n                          size=\"sm\"\n                          StartIcon={SelectionAll}\n                          onClick={selection.onSelectionStart}\n                          disabled={selection.isSelectionDisabled}\n                        >\n                          {selectionLabels.startSelection}\n                        </Button>\n                      </div>\n                    </TooltipTrigger>\n                    {selection.labels?.selectionDisabledTooltip && selection.isSelectionDisabled && (\n                      <TooltipContent>{selection.labels.selectionDisabledTooltip}</TooltipContent>\n                    )}\n                  </TooltipRoot>\n                </TooltipProvider>\n              )}\n            </div>\n          )}\n        </div>\n\n        <div className=\"flex items-center gap-2\">\n          {/* eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing */}\n          {showFiltersButton && (\n            <PopoverRoot>\n              <PopoverTrigger asChild>\n                <Button variant=\"text\" size=\"sm\" StartIcon={FunnelSimple} className=\"relative whitespace-nowrap\">\n                  {showBadge && (\n                    <Badge\n                      count={activeFiltersCount}\n                      color=\"primary\"\n                      ping={false}\n                      className=\"absolute -top-1 -right-1\"\n                    />\n                  )}\n                  {filtersButtonLabel}\n                </Button>\n              </PopoverTrigger>\n              <PopoverContent\n                align=\"center\"\n                className={cn('w-fit p-4', isMobile && 'max-h-[80vh] w-[95vw] overflow-y-auto')}\n              >\n                <div className=\"flex flex-col gap-4\">\n                  {isMobile && primaryFilters}\n                  {secondaryFilters}\n                </div>\n              </PopoverContent>\n            </PopoverRoot>\n          )}\n          {showColumnVisibilityControls && (\n            <DropdownMenu>\n              <DropdownMenuTrigger asChild>\n                <Button variant=\"text\" size=\"sm\" className={cn('whitespace-nowrap')} StartIcon={TextColumns}>\n                  {labels.columnVisibilityButton}\n                </Button>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent>\n                <DropdownMenuCheckboxItem\n                  key={'all-columns'}\n                  className=\"capitalize\"\n                  checked={table.getAllColumns().every((column) => column.getIsVisible())}\n                  onSelect={(event) => event.preventDefault()}\n                  onCheckedChange={(value) =>\n                    table.getAllColumns().forEach((column) => column.toggleVisibility(!!value))\n                  }\n                >\n                  {labels.columnVisibilitySelectAll}\n                </DropdownMenuCheckboxItem>\n                <DropdownMenuSeparator className=\"bg-neutral-100\" />\n                {table\n                  .getAllColumns()\n                  .filter((column) => column.getCanHide() && column.id !== 'select')\n                  .map((column) => {\n                    return (\n                      <DropdownMenuCheckboxItem\n                        key={column.id}\n                        className=\"capitalize\"\n                        checked={column.getIsVisible()}\n                        onSelect={(event) => event.preventDefault()}\n                        onCheckedChange={(value) => column.toggleVisibility(!!value)}\n                      >\n                        {column.columnDef.header?.toString()}\n                      </DropdownMenuCheckboxItem>\n                    )\n                  })}\n              </DropdownMenuContent>\n            </DropdownMenu>\n          )}\n        </div>\n      </div>\n    </div>\n  )\n}\n"],"names":[],"mappings":"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"}

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

@@ -1 +1,2 @@
 export * from './DataTable';
+export * from './types';

package/dist/components/DataTable/types.d.ts

@@ -1,170 +1,162 @@
 import { ColumnDef } from '@tanstack/react-table';
 import { ReactNode } from 'react';
 export type User = {
-  id: string
-  name: string
-  email: string
-  role: string
-  status: 'active' | 'inactive' | 'pending'
-}
-
+    id: string;
+    name: string;
+    email: string;
+    role: string;
+    status: 'active' | 'inactive' | 'pending';
+};
 export type UserExtended = User & {
-  salary: number
-  employeeId: string
-  manager: string
-  officeNumber: string
-  lastLogin: string
-  vacationDays: number
-  projectCount: number
-  performanceRating: number
-  certifications: Array<string>
-  languages: Array<string>
-  department: string
-  location: string
-  joinDate: string
-  phoneNumber: string
-  title: string
-}
-
+    salary: number;
+    employeeId: string;
+    manager: string;
+    officeNumber: string;
+    lastLogin: string;
+    vacationDays: number;
+    projectCount: number;
+    performanceRating: number;
+    certifications: Array<string>;
+    languages: Array<string>;
+    department: string;
+    location: string;
+    joinDate: string;
+    phoneNumber: string;
+    title: string;
+};
 export type Product = {
-  id: string
-  name: string
-  category: string
-  price: number
-  stock: number
-  lastUpdated: string
-}
-
+    id: string;
+    name: string;
+    category: string;
+    price: number;
+    stock: number;
+    lastUpdated: string;
+};
 export type SelectionConfig<TData> = {
-  /** Whether the row is selected */
-  isSelected: (row: TData) => boolean
-  /** Callback when a row is selected */
-  onSelect?: (row: TData, selected: boolean) => void
-  /** Callback when all rows are selected */
-  onSelectAll?: (selected: boolean) => void
-  /** Optional callback when selection has started (for backend pagination) */
-  onSelectionStart?: () => void
-  /** Optional callback when selection mode is cancelled (for backend pagination) */
-  onSelectionCancel?: () => void
-  /** Whether selection mode is active (for backend pagination) */
-  isSelectionStarted?: boolean
-  /** Whether the selection is disabled */
-  isSelectionDisabled?: boolean
-  /** Whether the row selection is disabled */
-  isRowSelectionDisabled?: boolean | ((row: TData) => boolean)
-  /** Selection-related labels for UI customization */
-  labels?: {
-    /** Text for the selection disabled tooltip */
-    selectionDisabledTooltip?: string | undefined
-    /** Tooltip text shown when the checkbox is disabled */
-    rowSelectionDisabledTooltip?: string | ((row: TData) => string | undefined)
-    /** Text for the start selection button (default: "Select") */
-    startSelection?: string
-    /** Text for the cancel selection button (default: "Cancel") */
-    cancelSelection?: string
-    /** Text for the selection summary (default: "Selected {count} of {total}") */
-    selectionSummary?: string
-  }
-}
-
+    /** Whether the row is selected */
+    isSelected: (row: TData) => boolean;
+    /** Callback when a row is selected */
+    onSelect?: (row: TData, selected: boolean) => void;
+    /** Callback when all rows are selected */
+    onSelectAll?: (selected: boolean) => void;
+    /** Optional callback when selection has started (for backend pagination) */
+    onSelectionStart?: () => void;
+    /** Optional callback when selection mode is cancelled (for backend pagination) */
+    onSelectionCancel?: () => void;
+    /** Whether selection mode is active (for backend pagination) */
+    isSelectionStarted?: boolean;
+    /** Whether the selection is disabled */
+    isSelectionDisabled?: boolean;
+    /** Whether the row selection is disabled */
+    isRowSelectionDisabled?: boolean | ((row: TData) => boolean);
+    /** Selection-related labels for UI customization */
+    labels?: {
+        /** Text for the selection disabled tooltip */
+        selectionDisabledTooltip?: string | undefined;
+        /** Tooltip text shown when the checkbox is disabled */
+        rowSelectionDisabledTooltip?: string | ((row: TData) => string | undefined);
+        /** Text for the start selection button (default: "Select") */
+        startSelection?: string;
+        /** Text for the cancel selection button (default: "Cancel") */
+        cancelSelection?: string;
+        /** Text for the selection summary (default: "Selected {count} of {total}") */
+        selectionSummary?: string;
+    };
+};
 export type BasePaginationProps = {
-  /** Number of rows per page */
-  readonly pageSize: number
-  /** Whether the pagination is in a loading state */
-  readonly isLoading?: boolean
-  /** Text customization for pagination */
-  readonly labels?: {
-    /** Text shown before the page size number (default: "Showing") */
-    showing?: string
-    /** Text shown before the total number (default: "of") */
-    of?: string
-    /** Text shown after the total number (default: "results") */
-    results?: string
-    /** Aria label for previous page button (default: "Previous page") */
-    previousPage?: string
-    /** Aria label for next page button (default: "Next page") */
-    nextPage?: string
-    /** Aria label for page number (default: "Page {number}") */
-    pageLabel?: string
-  }
-}
-
+    /** Number of rows per page */
+    readonly pageSize: number;
+    /** Whether the pagination is in a loading state */
+    readonly isLoading?: boolean;
+    /** Text customization for pagination */
+    readonly labels?: {
+        /** Text shown before the page size number (default: "Showing") */
+        showing?: string;
+        /** Text shown before the total number (default: "of") */
+        of?: string;
+        /** Text shown after the total number (default: "results") */
+        results?: string;
+        /** Aria label for previous page button (default: "Previous page") */
+        previousPage?: string;
+        /** Aria label for next page button (default: "Next page") */
+        nextPage?: string;
+        /** Aria label for page number (default: "Page {number}") */
+        pageLabel?: string;
+    };
+};
 export type BackendPaginationProps = {
-  /** Current page */
-  readonly currentPage: number
-  /** Total number of items */
-  readonly total: number
-  /** Callback when page changes */
-  readonly onPageChange: (page: number) => void
-} & BasePaginationProps
-
+    /** Current page */
+    readonly currentPage: number;
+    /** Total number of items */
+    readonly total: number;
+    /** Callback when page changes */
+    readonly onPageChange: (page: number) => void;
+} & BasePaginationProps;
 export type DataTableProps<TData> = {
-  /** Array of column definitions that describe the table structure */
-  readonly columns: Array<ColumnDef<TData>>
-  /** Array of data items to be displayed in the table */
-  readonly data: Array<TData>
-  /** Whether to show the column visibility toggle menu */
-  readonly showColumnVisibilityControls?: boolean
-  /** Whether the table is in a loading state */
-  readonly isLoading?: boolean
-  /** Pagination configuration. If not provided, pagination is disabled */
-  readonly pagination?: BasePaginationProps | BackendPaginationProps
-  /** Primary filters that appear directly above the table */
-  readonly primaryFilters?: ReactNode
-  /** Secondary filters that appear in the filters dropdown */
-  readonly secondaryFilters?: ReactNode
-  /** Number of active primary filters */
-  readonly activePrimaryFiltersCount?: number
-  /** Number of active secondary filters */
-  readonly activeSecondaryFiltersCount?: number
-  /** Selection configuration */
-  readonly selection?: SelectionConfig<TData>
-  /** Whether to hide the checkbox selection column */
-  readonly hideCheckboxSelection?: boolean
-  /** Empty state configuration */
-  readonly emptyState?: {
-    /** Title for the empty state */
-    title: string
-    /** Description for the empty state */
-    description: string
-    /** Route for the empty state image */
-    imageRoute?: string
-    /** Alt text for the empty state image */
-    imageAlt?: string
-    /** Class name for the empty state image */
-    imageClassName?: string
-  }
-  /** Text customization for filters */
-  readonly labels?: {
-    /** Text for the column visibility button (default: "Hide columns") */
-    columnVisibilityButton?: string
-    /** Text for the columns visibility select all option (default: "Select all") */
-    columnVisibilitySelectAll?: string
-    /** Text for the filters button when only secondary filters are present (default: "Filters") */
-    filters?: string
-    /** Text for the more filters button when both primary and secondary filters are present (default: "More filters") */
-    moreFilters?: string
-  }
-  /** Optional className for the table container */
-  readonly className?: string
-  /** Optional className for the table */
-  readonly tableClassName?: string
-} & (HasId<TData> extends true
-  ? {
-      /** Function to get unique identifier from a row. Not needed when data has 'id' property */
-      readonly getRowId?: RowIdentifierFn<TData>
-    }
-  : {
-      /** Function to get unique identifier from a row. Required when data doesn't have 'id' property */
-      readonly getRowId: RowIdentifierFn<TData>
-    })
-
+    /** Array of column definitions that describe the table structure */
+    readonly columns: Array<ColumnDef<TData>>;
+    /** Array of data items to be displayed in the table */
+    readonly data: Array<TData>;
+    /** Whether to show the column visibility toggle menu */
+    readonly showColumnVisibilityControls?: boolean;
+    /** Whether the table is in a loading state */
+    readonly isLoading?: boolean;
+    /** Pagination configuration. If not provided, pagination is disabled */
+    readonly pagination?: BasePaginationProps | BackendPaginationProps;
+    /** Primary filters that appear directly above the table */
+    readonly primaryFilters?: ReactNode;
+    /** Secondary filters that appear in the filters dropdown */
+    readonly secondaryFilters?: ReactNode;
+    /** Number of active primary filters */
+    readonly activePrimaryFiltersCount?: number;
+    /** Number of active secondary filters */
+    readonly activeSecondaryFiltersCount?: number;
+    /** Selection configuration */
+    readonly selection?: SelectionConfig<TData>;
+    /** Whether to hide the checkbox selection column */
+    readonly hideCheckboxSelection?: boolean;
+    /** Empty state configuration */
+    readonly emptyState?: {
+        /** Title for the empty state */
+        title: string;
+        /** Description for the empty state */
+        description: string;
+        /** Route for the empty state image */
+        imageRoute?: string;
+        /** Alt text for the empty state image */
+        imageAlt?: string;
+        /** Class name for the empty state image */
+        imageClassName?: string;
+    };
+    /** Text customization for filters */
+    readonly labels?: {
+        /** Text for the column visibility button (default: "Hide columns") */
+        columnVisibilityButton?: string;
+        /** Text for the columns visibility select all option (default: "Select all") */
+        columnVisibilitySelectAll?: string;
+        /** Text for the filters button when only secondary filters are present (default: "Filters") */
+        filters?: string;
+        /** Text for the more filters button when both primary and secondary filters are present (default: "More filters") */
+        moreFilters?: string;
+    };
+    /** Optional className for the table container */
+    readonly className?: string;
+    /** Optional className for the table */
+    readonly tableClassName?: string;
+} & (HasId<TData> extends true ? {
+    /** Function to get unique identifier from a row. Not needed when data has 'id' property */
+    readonly getRowId?: RowIdentifierFn<TData>;
+} : {
+    /** Function to get unique identifier from a row. Required when data doesn't have 'id' property */
+    readonly getRowId: RowIdentifierFn<TData>;
+});
 /**
  * Type helper to check if a type has an 'id' property
  */
-export type HasId<T> = T extends { id: string | number } ? true : false
-
+export type HasId<T> = T extends {
+    id: string | number;
+} ? true : false;
 /**
  * Function to get a unique identifier from a row
  */
-export type RowIdentifierFn<T> = (row: T) => string
+export type RowIdentifierFn<T> = (row: T) => string;

package/dist/components/DataTable/types.js

@@ -0,0 +1,2 @@
+
+//# sourceMappingURL=types.js.map

package/dist/components/DataTable/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/components/Dialog/Dialog.js

@@ -28,7 +28,7 @@ const DialogContent = React.forwardRef(
       {
         ref,
         className: cn(
-          "bg-background-100 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] fixed top-[50%] left-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border p-6 shadow-lg duration-200 sm:rounded-lg",
+          "bg-background-100 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border p-6 shadow-lg duration-200 sm:rounded-lg",
           className
         ),
         onPointerDownOutside: (e) => {

package/dist/components/Dialog/Dialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"Dialog.js","sources":["../../../src/components/Dialog/Dialog.tsx"],"sourcesContent":["import { X } from '@phosphor-icons/react'\nimport * as DialogPrimitive from '@radix-ui/react-dialog'\nimport * as React from 'react'\n\nimport { cn } from '@/lib/utils'\n\ntype DialogContentProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> & {\n  closable?: boolean\n}\n\nconst Dialog = DialogPrimitive.Root\n\nconst DialogTrigger = DialogPrimitive.Trigger\n\nconst DialogPortal = DialogPrimitive.Portal\n\nconst DialogClose = DialogPrimitive.Close\n\nconst DialogOverlay = React.forwardRef<\n  React.ComponentRef<typeof DialogPrimitive.Overlay>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>\n>(({ className, ...props }, ref) => (\n  <DialogPrimitive.Overlay\n    ref={ref}\n    className={cn(\n      'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80',\n      className,\n    )}\n    {...props}\n  />\n))\nDialogOverlay.displayName = DialogPrimitive.Overlay.displayName\n\nconst DialogContent = React.forwardRef<React.ComponentRef<typeof DialogPrimitive.Content>, DialogContentProps>(\n  ({ className, children, closable = true, ...props }, ref) => (\n    <DialogPortal>\n      <DialogOverlay />\n      <DialogPrimitive.Content\n        ref={ref}\n        className={cn(\n          'bg-background-100 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] fixed top-[50%] left-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border p-6 shadow-lg duration-200 sm:rounded-lg',\n          className,\n        )}\n        onPointerDownOutside={(e) => {\n          if (!closable) {\n            e.preventDefault()\n          }\n        }}\n        onEscapeKeyDown={(e) => {\n          if (!closable) {\n            e.preventDefault()\n          }\n        }}\n        {...props}\n      >\n        {children}\n        {closable ? (\n          <DialogPrimitive.Close className=\"data-[state=open]:text-muted-foreground ring-offset-background focus:ring-ring data-[state=open]:bg-accent absolute top-4 right-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-none disabled:pointer-events-none\">\n            <X size={24} weight=\"bold\" />\n            <span className=\"sr-only\">Close</span>\n          </DialogPrimitive.Close>\n        ) : null}\n      </DialogPrimitive.Content>\n    </DialogPortal>\n  ),\n)\nDialogContent.displayName = DialogPrimitive.Content.displayName\n\nconst DialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (\n  <div className={cn('flex flex-col space-y-1.5 text-center sm:text-left', className)} {...props} />\n)\nDialogHeader.displayName = 'DialogHeader'\n\nconst DialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (\n  <div className={cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2', className)} {...props} />\n)\nDialogFooter.displayName = 'DialogFooter'\n\nconst DialogTitle = React.forwardRef<\n  React.ComponentRef<typeof DialogPrimitive.Title>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>\n>(({ className, ...props }, ref) => (\n  <DialogPrimitive.Title\n    ref={ref}\n    className={cn('text-lg leading-none font-semibold tracking-tight', className)}\n    {...props}\n  />\n))\nDialogTitle.displayName = DialogPrimitive.Title.displayName\n\nconst DialogDescription = React.forwardRef<\n  React.ComponentRef<typeof DialogPrimitive.Description>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>\n>(({ className, ...props }, ref) => (\n  <DialogPrimitive.Description ref={ref} className={cn('text-muted-foreground text-sm', className)} {...props} />\n))\nDialogDescription.displayName = DialogPrimitive.Description.displayName\n\nexport {\n  Dialog,\n  DialogPortal,\n  DialogOverlay,\n  DialogTrigger,\n  DialogClose,\n  DialogContent,\n  DialogHeader,\n  DialogFooter,\n  DialogTitle,\n  DialogDescription,\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"Dialog.js","sources":["../../../src/components/Dialog/Dialog.tsx"],"sourcesContent":["import { X } from '@phosphor-icons/react'\nimport * as DialogPrimitive from '@radix-ui/react-dialog'\nimport * as React from 'react'\n\nimport { cn } from '@/lib/utils'\n\ntype DialogContentProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> & {\n  closable?: boolean\n}\n\nconst Dialog = DialogPrimitive.Root\n\nconst DialogTrigger = DialogPrimitive.Trigger\n\nconst DialogPortal = DialogPrimitive.Portal\n\nconst DialogClose = DialogPrimitive.Close\n\nconst DialogOverlay = React.forwardRef<\n  React.ComponentRef<typeof DialogPrimitive.Overlay>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>\n>(({ className, ...props }, ref) => (\n  <DialogPrimitive.Overlay\n    ref={ref}\n    className={cn(\n      'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80',\n      className,\n    )}\n    {...props}\n  />\n))\nDialogOverlay.displayName = DialogPrimitive.Overlay.displayName\n\nconst DialogContent = React.forwardRef<React.ComponentRef<typeof DialogPrimitive.Content>, DialogContentProps>(\n  ({ className, children, closable = true, ...props }, ref) => (\n    <DialogPortal>\n      <DialogOverlay />\n      <DialogPrimitive.Content\n        ref={ref}\n        className={cn(\n          'bg-background-100 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border p-6 shadow-lg duration-200 sm:rounded-lg',\n          className,\n        )}\n        onPointerDownOutside={(e) => {\n          if (!closable) {\n            e.preventDefault()\n          }\n        }}\n        onEscapeKeyDown={(e) => {\n          if (!closable) {\n            e.preventDefault()\n          }\n        }}\n        {...props}\n      >\n        {children}\n        {closable ? (\n          <DialogPrimitive.Close className=\"data-[state=open]:text-muted-foreground ring-offset-background focus:ring-ring data-[state=open]:bg-accent absolute top-4 right-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-none disabled:pointer-events-none\">\n            <X size={24} weight=\"bold\" />\n            <span className=\"sr-only\">Close</span>\n          </DialogPrimitive.Close>\n        ) : null}\n      </DialogPrimitive.Content>\n    </DialogPortal>\n  ),\n)\nDialogContent.displayName = DialogPrimitive.Content.displayName\n\nconst DialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (\n  <div className={cn('flex flex-col space-y-1.5 text-center sm:text-left', className)} {...props} />\n)\nDialogHeader.displayName = 'DialogHeader'\n\nconst DialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (\n  <div className={cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2', className)} {...props} />\n)\nDialogFooter.displayName = 'DialogFooter'\n\nconst DialogTitle = React.forwardRef<\n  React.ComponentRef<typeof DialogPrimitive.Title>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>\n>(({ className, ...props }, ref) => (\n  <DialogPrimitive.Title\n    ref={ref}\n    className={cn('text-lg leading-none font-semibold tracking-tight', className)}\n    {...props}\n  />\n))\nDialogTitle.displayName = DialogPrimitive.Title.displayName\n\nconst DialogDescription = React.forwardRef<\n  React.ComponentRef<typeof DialogPrimitive.Description>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>\n>(({ className, ...props }, ref) => (\n  <DialogPrimitive.Description ref={ref} className={cn('text-muted-foreground text-sm', className)} {...props} />\n))\nDialogDescription.displayName = DialogPrimitive.Description.displayName\n\nexport {\n  Dialog,\n  DialogPortal,\n  DialogOverlay,\n  DialogTrigger,\n  DialogClose,\n  DialogContent,\n  DialogHeader,\n  DialogFooter,\n  DialogTitle,\n  DialogDescription,\n}\n"],"names":[],"mappings":"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"}

package/dist/components/Popover/Popover.js

@@ -14,7 +14,7 @@ const PopoverContent = React.forwardRef(({ className, align = "center", sideOffs
     sideOffset,
     side,
     className: cn(
-      "text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-[--radix-popover-content-available-height] w-[--radix-popover-trigger-width] min-w-[200px] rounded-md border bg-white p-4 text-center shadow-md outline-none",
+      "text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-[--radix-popover-content-available-height] w-[var(--radix-popover-trigger-width)] min-w-[200px] rounded-md border bg-white p-4 text-center shadow-md outline-none",
       className
     ),
     ...props

package/dist/components/Popover/Popover.js.map

@@ -1 +1 @@
-{"version":3,"file":"Popover.js","sources":["../../../src/components/Popover/Popover.tsx"],"sourcesContent":["import * as PopoverPrimitive from '@radix-ui/react-popover'\nimport * as React from 'react'\n\nimport { cn } from '@/lib/utils'\n\n/**\n * Root component for the Popover.\n * Manages the state and accessibility of the popover dialog.\n */\nconst PopoverRoot = PopoverPrimitive.Root\n\n/**\n * The button that triggers the popover to open/close.\n * Must be wrapped in a Popover component.\n */\nconst PopoverTrigger = PopoverPrimitive.Trigger\n\n/**\n * Optional anchor element that positions the popover.\n * Useful when the trigger element is not where you want the popover to be anchored.\n */\nconst PopoverAnchor = PopoverPrimitive.Anchor\n\nexport type PopoverProps = {\n  /**\n   * Content to be displayed inside the popover.\n   * Can be either a React element or a string.\n   */\n  children: React.ReactElement | string\n\n  /**\n   * Element that triggers the popover when interacted with.\n   * Can be either a React element or a string.\n   * @example <PopoverComponent triggerElement={<Button>Click me</Button>} />\n   */\n  triggerElement: React.ReactElement | string\n\n  /**\n   * Position of the popover relative to the trigger element.\n   * @default bottom\n   */\n  side?: 'top' | 'right' | 'bottom' | 'left'\n\n  /**\n   * Additional CSS classes to be applied to the popover content.\n   */\n  className?: string\n\n  /**\n   * Alignment of the popover relative to the trigger element.\n   * @default center\n   */\n  align?: 'start' | 'center' | 'end'\n\n  /**\n   * Distance in pixels between the trigger element and the popover.\n   * @default 4\n   */\n  sideOffset?: number\n}\n\n/**\n * PopoverContent component that renders the actual popover content.\n * Handled internally by the PopoverComponent.\n */\nconst PopoverContent = React.forwardRef<\n  React.ComponentRef<typeof PopoverPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>\n>(({ className, align = 'center', sideOffset = 4, side = 'bottom', ...props }, ref) => (\n  <PopoverPrimitive.Portal>\n    <PopoverPrimitive.Content\n      ref={ref}\n      align={align}\n      sideOffset={sideOffset}\n      side={side}\n      className={cn(\n        'text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-[--radix-popover-content-available-height] w-[--radix-popover-trigger-width] min-w-[200px] rounded-md border bg-white p-4 text-center shadow-md outline-none',\n        className,\n      )}\n      {...props}\n    />\n  </PopoverPrimitive.Portal>\n))\nPopoverContent.displayName = PopoverPrimitive.Content.displayName\n\n/**\n * A versatile Popover component that displays floating content when triggered.\n * Built on top of Radix UI's Popover primitives.\n *\n * @example\n * // Basic usage\n * <PopoverComponent\n *   triggerElement={<Button>Click me</Button>}\n *   side=\"bottom\"\n * >\n *   Popover content\n * </PopoverComponent>\n *\n * // With custom alignment and offset\n * <PopoverComponent\n *   triggerElement={<Button>Settings</Button>}\n *   side=\"right\"\n *   align=\"start\"\n *   sideOffset={8}\n * >\n *   <div>Custom content</div>\n * </PopoverComponent>\n */\nexport const Popover = ({\n  side,\n  triggerElement,\n  children,\n  className,\n  align = 'center',\n  sideOffset = 4,\n}: Readonly<PopoverProps>) => {\n  return (\n    <PopoverRoot>\n      <PopoverTrigger asChild>\n        {typeof triggerElement === 'string' ? <span className=\"cursor-pointer\">{triggerElement}</span> : triggerElement}\n      </PopoverTrigger>\n      <PopoverContent side={side} className={className} align={align} sideOffset={sideOffset}>\n        {children}\n      </PopoverContent>\n    </PopoverRoot>\n  )\n}\n\nexport { PopoverRoot, PopoverTrigger, PopoverContent, PopoverAnchor }\n"],"names":[],"mappings":";;;;;AASA,MAAM,cAAc,gBAAA,CAAiB;AAMrC,MAAM,iBAAiB,gBAAA,CAAiB;AAMxC,MAAM,gBAAgB,gBAAA,CAAiB;AA4CvC,MAAM,iBAAiB,KAAA,CAAM,UAAA,CAG3B,CAAC,EAAE,SAAA,EAAW,QAAQ,QAAA,EAAU,UAAA,GAAa,GAAG,IAAA,GAAO,QAAA,EAAU,GAAG,KAAA,EAAM,EAAG,wBAC7E,GAAA,CAAC,gBAAA,CAAiB,QAAjB,EACC,QAAA,kBAAA,GAAA;AAAA,EAAC,gBAAA,CAAiB,OAAA;AAAA,EAAjB;AAAA,IACC,GAAA;AAAA,IACA,KAAA;AAAA,IACA,UAAA;AAAA,IACA,IAAA;AAAA,IACA,SAAA,EAAW,EAAA;AAAA,MACT,khBAAA;AAAA,MACA;AAAA,KACF;AAAA,IACC,GAAG;AAAA;AACN,CAAA,EACF,CACD;AACD,cAAA,CAAe,WAAA,GAAc,iBAAiB,OAAA,CAAQ,WAAA;AAyB/C,MAAM,UAAU,CAAC;AAAA,EACtB,IAAA;AAAA,EACA,cAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA;AAAA,EACA,KAAA,GAAQ,QAAA;AAAA,EACR,UAAA,GAAa;AACf,CAAA,KAA8B;AAC5B,EAAA,4BACG,WAAA,EAAA,EACC,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,cAAA,EAAA,EAAe,OAAA,EAAO,IAAA,EACpB,QAAA,EAAA,OAAO,cAAA,KAAmB,QAAA,mBAAW,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,gBAAA,EAAkB,QAAA,EAAA,cAAA,EAAe,CAAA,GAAU,cAAA,EACnG,CAAA;AAAA,wBACC,cAAA,EAAA,EAAe,IAAA,EAAY,SAAA,EAAsB,KAAA,EAAc,YAC7D,QAAA,EACH;AAAA,GAAA,EACF,CAAA;AAEJ;;;;"}
+{"version":3,"file":"Popover.js","sources":["../../../src/components/Popover/Popover.tsx"],"sourcesContent":["import * as PopoverPrimitive from '@radix-ui/react-popover'\nimport * as React from 'react'\n\nimport { cn } from '@/lib/utils'\n\n/**\n * Root component for the Popover.\n * Manages the state and accessibility of the popover dialog.\n */\nconst PopoverRoot = PopoverPrimitive.Root\n\n/**\n * The button that triggers the popover to open/close.\n * Must be wrapped in a Popover component.\n */\nconst PopoverTrigger = PopoverPrimitive.Trigger\n\n/**\n * Optional anchor element that positions the popover.\n * Useful when the trigger element is not where you want the popover to be anchored.\n */\nconst PopoverAnchor = PopoverPrimitive.Anchor\n\nexport type PopoverProps = {\n  /**\n   * Content to be displayed inside the popover.\n   * Can be either a React element or a string.\n   */\n  children: React.ReactElement | string\n\n  /**\n   * Element that triggers the popover when interacted with.\n   * Can be either a React element or a string.\n   * @example <PopoverComponent triggerElement={<Button>Click me</Button>} />\n   */\n  triggerElement: React.ReactElement | string\n\n  /**\n   * Position of the popover relative to the trigger element.\n   * @default bottom\n   */\n  side?: 'top' | 'right' | 'bottom' | 'left'\n\n  /**\n   * Additional CSS classes to be applied to the popover content.\n   */\n  className?: string\n\n  /**\n   * Alignment of the popover relative to the trigger element.\n   * @default center\n   */\n  align?: 'start' | 'center' | 'end'\n\n  /**\n   * Distance in pixels between the trigger element and the popover.\n   * @default 4\n   */\n  sideOffset?: number\n}\n\n/**\n * PopoverContent component that renders the actual popover content.\n * Handled internally by the PopoverComponent.\n */\nconst PopoverContent = React.forwardRef<\n  React.ComponentRef<typeof PopoverPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>\n>(({ className, align = 'center', sideOffset = 4, side = 'bottom', ...props }, ref) => (\n  <PopoverPrimitive.Portal>\n    <PopoverPrimitive.Content\n      ref={ref}\n      align={align}\n      sideOffset={sideOffset}\n      side={side}\n      className={cn(\n        'text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-[--radix-popover-content-available-height] w-[var(--radix-popover-trigger-width)] min-w-[200px] rounded-md border bg-white p-4 text-center shadow-md outline-none',\n        className,\n      )}\n      {...props}\n    />\n  </PopoverPrimitive.Portal>\n))\nPopoverContent.displayName = PopoverPrimitive.Content.displayName\n\n/**\n * A versatile Popover component that displays floating content when triggered.\n * Built on top of Radix UI's Popover primitives.\n *\n * @example\n * // Basic usage\n * <PopoverComponent\n *   triggerElement={<Button>Click me</Button>}\n *   side=\"bottom\"\n * >\n *   Popover content\n * </PopoverComponent>\n *\n * // With custom alignment and offset\n * <PopoverComponent\n *   triggerElement={<Button>Settings</Button>}\n *   side=\"right\"\n *   align=\"start\"\n *   sideOffset={8}\n * >\n *   <div>Custom content</div>\n * </PopoverComponent>\n */\nexport const Popover = ({\n  side,\n  triggerElement,\n  children,\n  className,\n  align = 'center',\n  sideOffset = 4,\n}: Readonly<PopoverProps>) => {\n  return (\n    <PopoverRoot>\n      <PopoverTrigger asChild>\n        {typeof triggerElement === 'string' ? <span className=\"cursor-pointer\">{triggerElement}</span> : triggerElement}\n      </PopoverTrigger>\n      <PopoverContent side={side} className={className} align={align} sideOffset={sideOffset}>\n        {children}\n      </PopoverContent>\n    </PopoverRoot>\n  )\n}\n\nexport { PopoverRoot, PopoverTrigger, PopoverContent, PopoverAnchor }\n"],"names":[],"mappings":";;;;;AASA,MAAM,cAAc,gBAAA,CAAiB;AAMrC,MAAM,iBAAiB,gBAAA,CAAiB;AAMxC,MAAM,gBAAgB,gBAAA,CAAiB;AA4CvC,MAAM,iBAAiB,KAAA,CAAM,UAAA,CAG3B,CAAC,EAAE,SAAA,EAAW,QAAQ,QAAA,EAAU,UAAA,GAAa,GAAG,IAAA,GAAO,QAAA,EAAU,GAAG,KAAA,EAAM,EAAG,wBAC7E,GAAA,CAAC,gBAAA,CAAiB,QAAjB,EACC,QAAA,kBAAA,GAAA;AAAA,EAAC,gBAAA,CAAiB,OAAA;AAAA,EAAjB;AAAA,IACC,GAAA;AAAA,IACA,KAAA;AAAA,IACA,UAAA;AAAA,IACA,IAAA;AAAA,IACA,SAAA,EAAW,EAAA;AAAA,MACT,uhBAAA;AAAA,MACA;AAAA,KACF;AAAA,IACC,GAAG;AAAA;AACN,CAAA,EACF,CACD;AACD,cAAA,CAAe,WAAA,GAAc,iBAAiB,OAAA,CAAQ,WAAA;AAyB/C,MAAM,UAAU,CAAC;AAAA,EACtB,IAAA;AAAA,EACA,cAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA;AAAA,EACA,KAAA,GAAQ,QAAA;AAAA,EACR,UAAA,GAAa;AACf,CAAA,KAA8B;AAC5B,EAAA,4BACG,WAAA,EAAA,EACC,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,cAAA,EAAA,EAAe,OAAA,EAAO,IAAA,EACpB,QAAA,EAAA,OAAO,cAAA,KAAmB,QAAA,mBAAW,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,gBAAA,EAAkB,QAAA,EAAA,cAAA,EAAe,CAAA,GAAU,cAAA,EACnG,CAAA;AAAA,wBACC,cAAA,EAAA,EAAe,IAAA,EAAY,SAAA,EAAsB,KAAA,EAAc,YAC7D,QAAA,EACH;AAAA,GAAA,EACF,CAAA;AAEJ;;;;"}

package/dist/components/RadioGroup/RadioGroup.js

@@ -14,7 +14,7 @@ const RadioGroupItem = React.forwardRef(({ className, ...props }, ref) => {
     {
       ref,
       className: cn(
-        "border-primary text-foreground ring-offset-background focus-visible:ring-accent-600 aspect-square h-4 w-4 flex-shrink-0 rounded-full border focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+        "border-primary text-foreground ring-offset-background focus-visible:ring-accent-600 aspect-square h-4 w-4 shrink-0 rounded-full border focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
         className
       ),
       ...props,

package/dist/components/RadioGroup/RadioGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadioGroup.js","sources":["../../../src/components/RadioGroup/RadioGroup.tsx"],"sourcesContent":["import { Check } from '@phosphor-icons/react'\nimport * as RadioGroupPrimitive from '@radix-ui/react-radio-group'\nimport * as React from 'react'\n\nimport { cn } from '@/lib/utils'\n\nconst RadioGroup = React.forwardRef<\n  React.ComponentRef<typeof RadioGroupPrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>\n>(({ className, ...props }, ref) => {\n  return <RadioGroupPrimitive.Root className={cn('grid gap-2', className)} {...props} ref={ref} />\n})\nRadioGroup.displayName = RadioGroupPrimitive.Root.displayName\n\nconst RadioGroupItem = React.forwardRef<\n  React.ComponentRef<typeof RadioGroupPrimitive.Item>,\n  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>\n>(({ className, ...props }, ref) => {\n  return (\n    <RadioGroupPrimitive.Item\n      ref={ref}\n      className={cn(\n        'border-primary text-foreground ring-offset-background focus-visible:ring-accent-600 aspect-square h-4 w-4 flex-shrink-0 rounded-full border focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',\n        className,\n      )}\n      {...props}\n    >\n      <RadioGroupPrimitive.Indicator className=\"flex items-center justify-center\">\n        <Check className=\"h-3 w-3 text-current\" weight=\"bold\" />\n      </RadioGroupPrimitive.Indicator>\n    </RadioGroupPrimitive.Item>\n  )\n})\nRadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName\n\nexport { RadioGroup, RadioGroupItem }\n"],"names":[],"mappings":";;;;;;AAMA,MAAM,UAAA,GAAa,MAAM,UAAA,CAGvB,CAAC,EAAE,SAAA,EAAW,GAAG,KAAA,EAAM,EAAG,GAAA,KAAQ;AAClC,EAAA,uBAAO,GAAA,CAAC,mBAAA,CAAoB,IAAA,EAApB,EAAyB,SAAA,EAAW,EAAA,CAAG,YAAA,EAAc,SAAS,CAAA,EAAI,GAAG,KAAA,EAAO,GAAA,EAAU,CAAA;AAChG,CAAC;AACD,UAAA,CAAW,WAAA,GAAc,oBAAoB,IAAA,CAAK,WAAA;AAElD,MAAM,cAAA,GAAiB,MAAM,UAAA,CAG3B,CAAC,EAAE,SAAA,EAAW,GAAG,KAAA,EAAM,EAAG,GAAA,KAAQ;AAClC,EAAA,uBACE,GAAA;AAAA,IAAC,mBAAA,CAAoB,IAAA;AAAA,IAApB;AAAA,MACC,GAAA;AAAA,MACA,SAAA,EAAW,EAAA;AAAA,QACT,iQAAA;AAAA,QACA;AAAA,OACF;AAAA,MACC,GAAG,KAAA;AAAA,MAEJ,QAAA,kBAAA,GAAA,CAAC,mBAAA,CAAoB,SAAA,EAApB,EAA8B,SAAA,EAAU,kCAAA,EACvC,QAAA,kBAAA,GAAA,CAAC,KAAA,EAAA,EAAM,SAAA,EAAU,sBAAA,EAAuB,MAAA,EAAO,MAAA,EAAO,CAAA,EACxD;AAAA;AAAA,GACF;AAEJ,CAAC;AACD,cAAA,CAAe,WAAA,GAAc,oBAAoB,IAAA,CAAK,WAAA;;;;"}
+{"version":3,"file":"RadioGroup.js","sources":["../../../src/components/RadioGroup/RadioGroup.tsx"],"sourcesContent":["import { Check } from '@phosphor-icons/react'\nimport * as RadioGroupPrimitive from '@radix-ui/react-radio-group'\nimport * as React from 'react'\n\nimport { cn } from '@/lib/utils'\n\nconst RadioGroup = React.forwardRef<\n  React.ComponentRef<typeof RadioGroupPrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>\n>(({ className, ...props }, ref) => {\n  return <RadioGroupPrimitive.Root className={cn('grid gap-2', className)} {...props} ref={ref} />\n})\nRadioGroup.displayName = RadioGroupPrimitive.Root.displayName\n\nconst RadioGroupItem = React.forwardRef<\n  React.ComponentRef<typeof RadioGroupPrimitive.Item>,\n  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>\n>(({ className, ...props }, ref) => {\n  return (\n    <RadioGroupPrimitive.Item\n      ref={ref}\n      className={cn(\n        'border-primary text-foreground ring-offset-background focus-visible:ring-accent-600 aspect-square h-4 w-4 shrink-0 rounded-full border focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',\n        className,\n      )}\n      {...props}\n    >\n      <RadioGroupPrimitive.Indicator className=\"flex items-center justify-center\">\n        <Check className=\"h-3 w-3 text-current\" weight=\"bold\" />\n      </RadioGroupPrimitive.Indicator>\n    </RadioGroupPrimitive.Item>\n  )\n})\nRadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName\n\nexport { RadioGroup, RadioGroupItem }\n"],"names":[],"mappings":";;;;;;AAMA,MAAM,UAAA,GAAa,MAAM,UAAA,CAGvB,CAAC,EAAE,SAAA,EAAW,GAAG,KAAA,EAAM,EAAG,GAAA,KAAQ;AAClC,EAAA,uBAAO,GAAA,CAAC,mBAAA,CAAoB,IAAA,EAApB,EAAyB,SAAA,EAAW,EAAA,CAAG,YAAA,EAAc,SAAS,CAAA,EAAI,GAAG,KAAA,EAAO,GAAA,EAAU,CAAA;AAChG,CAAC;AACD,UAAA,CAAW,WAAA,GAAc,oBAAoB,IAAA,CAAK,WAAA;AAElD,MAAM,cAAA,GAAiB,MAAM,UAAA,CAG3B,CAAC,EAAE,SAAA,EAAW,GAAG,KAAA,EAAM,EAAG,GAAA,KAAQ;AAClC,EAAA,uBACE,GAAA;AAAA,IAAC,mBAAA,CAAoB,IAAA;AAAA,IAApB;AAAA,MACC,GAAA;AAAA,MACA,SAAA,EAAW,EAAA;AAAA,QACT,4PAAA;AAAA,QACA;AAAA,OACF;AAAA,MACC,GAAG,KAAA;AAAA,MAEJ,QAAA,kBAAA,GAAA,CAAC,mBAAA,CAAoB,SAAA,EAApB,EAA8B,SAAA,EAAU,kCAAA,EACvC,QAAA,kBAAA,GAAA,CAAC,KAAA,EAAA,EAAM,SAAA,EAAU,sBAAA,EAAuB,MAAA,EAAO,MAAA,EAAO,CAAA,EACxD;AAAA;AAAA,GACF;AAEJ,CAAC;AACD,cAAA,CAAe,WAAA,GAAc,oBAAoB,IAAA,CAAK,WAAA;;;;"}

package/dist/components/Sidebar/Sidebar.js

@@ -95,7 +95,7 @@ const SidebarRoot = React.forwardRef(({ side = "left", variant = "default", clas
       {
         "data-sidebar": "sidebar",
         "data-mobile": "true",
-        className: "bg-sidebar text-sidebar-foreground w-[--sidebar-width] p-0 [&>button]:hidden",
+        className: "bg-sidebar text-sidebar-foreground w-[var(--sidebar-width)] p-0 [&>button]:hidden",
         style: {
           "--sidebar-width": SIDEBAR_WIDTH_MOBILE
         },
@@ -123,8 +123,8 @@ const SidebarRoot = React.forwardRef(({ side = "left", variant = "default", clas
           "div",
           {
             className: cn(
-              "relative w-[--sidebar-width] bg-transparent transition-[width] duration-200 ease-linear",
-              variant === "default" && "group-data-[state=collapsed]:w-[--sidebar-width-icon]",
+              "relative w-[var(--sidebar-width)] bg-transparent transition-[width] duration-200 ease-linear",
+              variant === "default" && "group-data-[state=collapsed]:w-[var(--sidebar-width-icon)]",
               variant === "hidden" && "group-data-[state=collapsed]:w-0",
               "group-data-[side=right]:rotate-180"
             )
@@ -134,14 +134,14 @@ const SidebarRoot = React.forwardRef(({ side = "left", variant = "default", clas
           "div",
           {
             className: cn(
-              "fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] duration-200 ease-linear md:flex",
+              "fixed inset-y-0 z-10 hidden h-svh w-[var(--sidebar-width)] transition-[left,right,width] duration-200 ease-linear md:flex",
               side === "left" ? [
                 "left-0",
-                variant === "default" && "group-data-[state=collapsed]:w-[--sidebar-width-icon]",
+                variant === "default" && "group-data-[state=collapsed]:w-[var(--sidebar-width-icon)]",
                 variant === "hidden" && "group-data-[state=collapsed]:left-[calc(var(--sidebar-width)*-1)]"
               ] : [
                 "right-0",
-                variant === "default" && "group-data-[state=collapsed]:w-[--sidebar-width-icon]",
+                variant === "default" && "group-data-[state=collapsed]:w-[var(--sidebar-width-icon)]",
                 variant === "hidden" && "group-data-[state=collapsed]:right-[calc(var(--sidebar-width)*-1)]"
               ],
               "group-data-[side=left]:border-r group-data-[side=right]:border-l",
@@ -431,7 +431,7 @@ const SidebarMenuSkeleton = React.forwardRef(({ className, showIcon = false, ...
         /* @__PURE__ */ jsx(
           Skeleton,
           {
-            className: "h-4 max-w-[--skeleton-width] flex-1",
+            className: "h-4 max-w-[var(--skeleton-width)] flex-1",
             "data-sidebar": "menu-skeleton-text",
             style: {
               "--skeleton-width": width

package/dist/components/Sidebar/Sidebar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Sidebar.js","sources":["../../../src/components/Sidebar/Sidebar.tsx"],"sourcesContent":["'use client'\n\nimport { Sidebar as SidebarIcon } from '@phosphor-icons/react'\nimport { Slot } from '@radix-ui/react-slot'\nimport { cva } from 'class-variance-authority'\nimport * as React from 'react'\n\nimport { useIsMobile } from '../../lib/useMobile'\nimport { Button } from '../Button'\nimport { Input } from '../Input'\nimport { Separator } from '../Separator'\nimport { SheetContent, SheetDescription, SheetHeader, SheetRoot, SheetTitle } from '../Sheet'\nimport { Skeleton } from '../Skeleton'\nimport { TooltipContent, TooltipProvider, TooltipRoot, TooltipTrigger } from '../Tooltip'\nimport { Typography } from '../Typography'\n\nimport { cn } from '@/lib/utils'\n\nconst SIDEBAR_COOKIE_NAME = 'sidebar_state'\nconst SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7\nconst SIDEBAR_WIDTH = '16rem'\nconst SIDEBAR_WIDTH_MOBILE = '18rem'\nconst SIDEBAR_WIDTH_ICON = '3rem'\nconst SIDEBAR_KEYBOARD_SHORTCUT = 'b'\n\ntype SidebarContext = {\n  state: 'expanded' | 'collapsed'\n  open: boolean\n  setOpen: (open: boolean) => void\n  openMobile: boolean\n  setOpenMobile: (open: boolean) => void\n  isMobile: boolean\n  toggleSidebar: () => void\n}\n\nconst SidebarContext = React.createContext<SidebarContext | null>(null)\n\nfunction useSidebar() {\n  const context = React.useContext(SidebarContext)\n  if (!context) {\n    throw new Error('useSidebar must be used within a SidebarProvider.')\n  }\n\n  return context\n}\n\nconst SidebarProvider = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentProps<'div'> & {\n    defaultOpen?: boolean\n    open?: boolean\n    onOpenChange?: (open: boolean) => void\n  }\n>(({ defaultOpen = true, open: openProp, onOpenChange: setOpenProp, className, style, children, ...props }, ref) => {\n  const isMobile = useIsMobile()\n  const [openMobile, setOpenMobile] = React.useState(false)\n\n  // This is the internal state of the sidebar.\n  // We use openProp and setOpenProp for control from outside the component.\n  const [_open, _setOpen] = React.useState(defaultOpen)\n  const open = openProp ?? _open\n  const setOpen = React.useCallback(\n    (value: boolean | ((value: boolean) => boolean)) => {\n      const openState = typeof value === 'function' ? value(open) : value\n      if (setOpenProp) {\n        setOpenProp(openState)\n      } else {\n        _setOpen(openState)\n      }\n\n      // This sets the cookie to keep the sidebar state.\n      document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`\n    },\n    [setOpenProp, open],\n  )\n\n  // Helper to toggle the sidebar.\n  const toggleSidebar = React.useCallback(() => {\n    isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open)\n  }, [isMobile, setOpen, setOpenMobile])\n\n  // Adds a keyboard shortcut to toggle the sidebar.\n  React.useEffect(() => {\n    const handleKeyDown = (event: KeyboardEvent) => {\n      if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {\n        event.preventDefault()\n        toggleSidebar()\n      }\n    }\n\n    window.addEventListener('keydown', handleKeyDown)\n    return () => window.removeEventListener('keydown', handleKeyDown)\n  }, [toggleSidebar])\n\n  // We add a state so that we can do data-state=\"expanded\" or \"collapsed\".\n  // This makes it easier to style the sidebar with Tailwind classes.\n  const state = open ? 'expanded' : 'collapsed'\n\n  const contextValue = React.useMemo<SidebarContext>(\n    () => ({\n      state,\n      open,\n      setOpen,\n      isMobile,\n      openMobile,\n      setOpenMobile,\n      toggleSidebar,\n    }),\n    [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar],\n  )\n\n  return (\n    <SidebarContext.Provider value={contextValue}>\n      <TooltipProvider delayDuration={0}>\n        <div\n          style={\n            {\n              '--sidebar-width': SIDEBAR_WIDTH,\n              '--sidebar-width-icon': SIDEBAR_WIDTH_ICON,\n              ...style,\n            } as React.CSSProperties\n          }\n          className={cn('group/sidebar-wrapper has-[[data-variant=inset]]:bg-sidebar flex min-h-svh w-full', className)}\n          ref={ref}\n          {...props}\n        >\n          {children}\n        </div>\n      </TooltipProvider>\n    </SidebarContext.Provider>\n  )\n})\nSidebarProvider.displayName = 'SidebarProvider'\n\nconst SidebarRoot = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentProps<'div'> & {\n    side?: 'left' | 'right'\n    variant?: 'default' | 'hidden'\n  }\n>(({ side = 'left', variant = 'default', className, children, ...props }, ref) => {\n  const { isMobile, state, openMobile, setOpenMobile } = useSidebar()\n\n  if (isMobile) {\n    return (\n      <SheetRoot open={openMobile} onOpenChange={setOpenMobile} {...props}>\n        <SheetContent\n          data-sidebar=\"sidebar\"\n          data-mobile=\"true\"\n          className=\"bg-sidebar text-sidebar-foreground w-[--sidebar-width] p-0 [&>button]:hidden\"\n          style={\n            {\n              '--sidebar-width': SIDEBAR_WIDTH_MOBILE,\n            } as React.CSSProperties\n          }\n          side={side}\n        >\n          <SheetHeader className=\"sr-only\">\n            <SheetTitle>Sidebar</SheetTitle>\n            <SheetDescription>Displays the mobile sidebar.</SheetDescription>\n          </SheetHeader>\n          <div className=\"flex h-full w-full flex-col\">{children}</div>\n        </SheetContent>\n      </SheetRoot>\n    )\n  }\n\n  return (\n    <div\n      ref={ref}\n      className=\"group peer text-sidebar-foreground hidden shadow-md md:block\"\n      data-state={state}\n      data-side={side}\n      data-variant={variant}\n    >\n      {/* This is what handles the sidebar gap on desktop */}\n      <div\n        className={cn(\n          'relative w-[--sidebar-width] bg-transparent transition-[width] duration-200 ease-linear',\n          variant === 'default' && 'group-data-[state=collapsed]:w-[--sidebar-width-icon]',\n          variant === 'hidden' && 'group-data-[state=collapsed]:w-0',\n          'group-data-[side=right]:rotate-180',\n        )}\n      />\n      <div\n        className={cn(\n          'fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] duration-200 ease-linear md:flex',\n          side === 'left'\n            ? [\n                'left-0',\n                variant === 'default' && 'group-data-[state=collapsed]:w-[--sidebar-width-icon]',\n                variant === 'hidden' && 'group-data-[state=collapsed]:left-[calc(var(--sidebar-width)*-1)]',\n              ]\n            : [\n                'right-0',\n                variant === 'default' && 'group-data-[state=collapsed]:w-[--sidebar-width-icon]',\n                variant === 'hidden' && 'group-data-[state=collapsed]:right-[calc(var(--sidebar-width)*-1)]',\n              ],\n          'group-data-[side=left]:border-r group-data-[side=right]:border-l',\n          className,\n        )}\n        {...props}\n      >\n        <div data-sidebar=\"sidebar\" className=\"bg-sidebar flex h-full w-full flex-col\">\n          {children}\n        </div>\n      </div>\n    </div>\n  )\n})\nSidebarRoot.displayName = 'SidebarRoot'\n\nconst SidebarTrigger = React.forwardRef<React.ComponentRef<typeof Button>, React.ComponentProps<typeof Button>>(\n  ({ className, onClick, ...props }, ref) => {\n    const { toggleSidebar } = useSidebar()\n\n    return (\n      <Button\n        ref={ref}\n        data-sidebar=\"trigger\"\n        variant=\"text\"\n        className={cn('text-primary-foreground h-8 w-8 p-1', className)}\n        onClick={(event) => {\n          onClick?.(event)\n          toggleSidebar()\n        }}\n        {...props}\n        StartIcon={SidebarIcon}\n      >\n        <span className=\"sr-only\">Toggle Sidebar</span>\n      </Button>\n    )\n  },\n)\nSidebarTrigger.displayName = 'SidebarTrigger'\n\nconst SidebarRail = React.forwardRef<HTMLButtonElement, React.ComponentProps<'button'>>(\n  ({ className, ...props }, ref) => {\n    const { toggleSidebar } = useSidebar()\n\n    return (\n      <button\n        ref={ref}\n        data-sidebar=\"rail\"\n        aria-label=\"Toggle Sidebar\"\n        tabIndex={-1}\n        onClick={toggleSidebar}\n        title=\"Toggle Sidebar\"\n        className={cn(\n          'hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] sm:flex',\n          '[[data-side=left]_&]:cursor-w-resize [[data-side=right]_&]:cursor-e-resize',\n          '[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize',\n          'group-data-[variant=offcanvas]:hover:bg-sidebar group-data-[variant=offcanvas]:translate-x-0 group-data-[variant=offcanvas]:after:left-full',\n          '[[data-side=left][data-variant=offcanvas]_&]:-right-2',\n          '[[data-side=right][data-variant=offcanvas]_&]:-left-2',\n          className,\n        )}\n        {...props}\n      />\n    )\n  },\n)\nSidebarRail.displayName = 'SidebarRail'\n\nconst SidebarInset = React.forwardRef<HTMLDivElement, React.ComponentProps<'main'>>(({ className, ...props }, ref) => {\n  return (\n    <main\n      ref={ref}\n      className={cn(\n        'bg-background relative flex w-full flex-1 flex-col',\n        'md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2',\n        className,\n      )}\n      {...props}\n    />\n  )\n})\nSidebarInset.displayName = 'SidebarInset'\n\nconst SidebarInput = React.forwardRef<React.ComponentRef<typeof Input>, React.ComponentProps<typeof Input>>(\n  ({ className, ...props }, ref) => {\n    return (\n      <Input\n        ref={ref}\n        data-sidebar=\"input\"\n        className={cn(\n          'bg-background focus-visible:ring-sidebar-ring h-8 w-full shadow-none focus-visible:ring-2',\n          className,\n        )}\n        {...props}\n      />\n    )\n  },\n)\nSidebarInput.displayName = 'SidebarInput'\n\nconst SidebarHeader = React.forwardRef<HTMLDivElement, React.ComponentProps<'div'>>(({ className, ...props }, ref) => {\n  return <div ref={ref} data-sidebar=\"header\" className={cn('flex flex-col gap-2 p-2', className)} {...props} />\n})\nSidebarHeader.displayName = 'SidebarHeader'\n\nconst SidebarFooter = React.forwardRef<HTMLDivElement, React.ComponentProps<'div'>>(({ className, ...props }, ref) => {\n  return <div ref={ref} data-sidebar=\"footer\" className={cn('flex flex-col gap-2 p-2', className)} {...props} />\n})\nSidebarFooter.displayName = 'SidebarFooter'\n\nconst SidebarSeparator = React.forwardRef<React.ComponentRef<typeof Separator>, React.ComponentProps<typeof Separator>>(\n  ({ className, ...props }, ref) => {\n    return (\n      <Separator\n        ref={ref}\n        data-sidebar=\"separator\"\n        className={cn('bg-sidebar-border mx-2 w-auto', className)}\n        {...props}\n      />\n    )\n  },\n)\nSidebarSeparator.displayName = 'SidebarSeparator'\n\nconst SidebarContent = React.forwardRef<HTMLDivElement, React.ComponentProps<'div'>>(({ className, ...props }, ref) => {\n  return (\n    <div\n      ref={ref}\n      data-sidebar=\"content\"\n      className={cn(\n        'flex min-h-0 flex-1 flex-col gap-2 overflow-auto',\n        'group-data-[variant=default]:group-data-[state=collapsed]:overflow-hidden',\n        className,\n      )}\n      {...props}\n    />\n  )\n})\nSidebarContent.displayName = 'SidebarContent'\n\nconst SidebarGroup = React.forwardRef<HTMLDivElement, React.ComponentProps<'div'>>(({ className, ...props }, ref) => {\n  return (\n    <div\n      ref={ref}\n      data-sidebar=\"group\"\n      className={cn('relative flex w-full min-w-0 flex-col p-2', className)}\n      {...props}\n    />\n  )\n})\nSidebarGroup.displayName = 'SidebarGroup'\n\nconst SidebarGroupLabel = React.forwardRef<HTMLDivElement, React.ComponentProps<'div'> & { asChild?: boolean }>(\n  ({ className, asChild = false, children, ...props }, ref) => {\n    const Comp = asChild ? Slot : 'div'\n\n    return (\n      <Comp\n        ref={ref}\n        data-sidebar=\"group-label\"\n        className={cn(\n          'text-sidebar-foreground/70 ring-sidebar-ring flex h-8 shrink-0 items-center rounded-md px-2 transition-[margin,opacity] duration-200 ease-linear outline-none focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',\n          'group-data-[state=collapsed]:group-data-[variant=hidden]:hidden',\n          'group-data-[state=collapsed]:group-data-[variant=default]:-mt-8 group-data-[state=collapsed]:group-data-[variant=default]:opacity-0',\n          className,\n        )}\n        {...props}\n      >\n        {typeof children === 'string' ? (\n          <Typography variant=\"label-md\" color=\"secondary\">\n            {children}\n          </Typography>\n        ) : (\n          children\n        )}\n      </Comp>\n    )\n  },\n)\nSidebarGroupLabel.displayName = 'SidebarGroupLabel'\n\nconst SidebarGroupAction = React.forwardRef<HTMLButtonElement, React.ComponentProps<'button'> & { asChild?: boolean }>(\n  ({ className, asChild = false, ...props }, ref) => {\n    const Comp = asChild ? Slot : 'button'\n\n    return (\n      <Comp\n        ref={ref}\n        data-sidebar=\"group-action\"\n        className={cn(\n          'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 transition-transform outline-none focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',\n          'after:absolute after:-inset-2 after:md:hidden',\n          'group-data-[state=collapsed]:hidden',\n          className,\n        )}\n        {...props}\n      />\n    )\n  },\n)\nSidebarGroupAction.displayName = 'SidebarGroupAction'\n\nconst SidebarGroupContent = React.forwardRef<HTMLDivElement, React.ComponentProps<'div'>>(\n  ({ className, ...props }, ref) => (\n    <div ref={ref} data-sidebar=\"group-content\" className={cn('w-full text-sm', className)} {...props} />\n  ),\n)\nSidebarGroupContent.displayName = 'SidebarGroupContent'\n\nconst SidebarMenu = React.forwardRef<HTMLUListElement, React.ComponentProps<'ul'>>(({ className, ...props }, ref) => (\n  <ul ref={ref} data-sidebar=\"menu\" className={cn('flex w-full min-w-0 flex-col gap-1', className)} {...props} />\n))\nSidebarMenu.displayName = 'SidebarMenu'\n\nconst SidebarMenuItem = React.forwardRef<HTMLLIElement, React.ComponentProps<'li'>>(({ className, ...props }, ref) => (\n  <li ref={ref} data-sidebar=\"menu-item\" className={cn('group/menu-item relative', className)} {...props} />\n))\nSidebarMenuItem.displayName = 'SidebarMenuItem'\n\nconst SidebarMenuButton = React.forwardRef<\n  HTMLButtonElement,\n  React.ComponentProps<'button'> & {\n    asChild?: boolean\n    isActive?: boolean\n    tooltip?: string | React.ComponentProps<typeof TooltipContent>\n    variant?: 'navigation-item' | 'element'\n  }\n>(({ asChild = false, isActive = false, tooltip, className, children, variant = 'navigation-item', ...props }, ref) => {\n  const Comp = asChild ? Slot : 'button'\n  const { isMobile, state } = useSidebar()\n\n  const sidebarMenuButtonVariants = cva(\n    'peer/menu-button flex w-full text-sm hover:bg-sidebar-accent hover:text-sidebar-accent-foreground items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=expanded]:hover:bg-sidebar-accent data-[state=expanded]:hover:text-sidebar-accent-foreground [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0',\n    {\n      variants: {\n        variant: {\n          'navigation-item': 'h-8',\n          element: 'group-data-[state=collapsed]:!p-0',\n        },\n      },\n      defaultVariants: {\n        variant: 'navigation-item',\n      },\n    },\n  )\n\n  const button = (\n    <Comp\n      ref={ref}\n      data-sidebar=\"menu-button\"\n      data-active={isActive}\n      className={cn(sidebarMenuButtonVariants({ variant }), className)}\n      {...props}\n    >\n      {children}\n    </Comp>\n  )\n\n  if (!tooltip) {\n    return button\n  }\n\n  if (typeof tooltip === 'string') {\n    tooltip = {\n      children: tooltip,\n    }\n  }\n\n  return (\n    <TooltipRoot>\n      <TooltipTrigger asChild>{button}</TooltipTrigger>\n      <TooltipContent side=\"right\" align=\"center\" hidden={state !== 'collapsed' || isMobile} {...tooltip} />\n    </TooltipRoot>\n  )\n})\nSidebarMenuButton.displayName = 'SidebarMenuButton'\n\nconst SidebarMenuAction = React.forwardRef<\n  HTMLButtonElement,\n  React.ComponentProps<'button'> & {\n    asChild?: boolean\n    showOnHover?: boolean\n  }\n>(({ className, asChild = false, showOnHover = false, ...props }, ref) => {\n  const Comp = asChild ? Slot : 'button'\n\n  return (\n    <Comp\n      ref={ref}\n      data-sidebar=\"menu-action\"\n      className={cn(\n        'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 transition-transform outline-none focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',\n        'after:absolute after:-inset-2 after:md:hidden',\n        'group-data-[state=collapsed]:hidden',\n        showOnHover &&\n          'peer-data-[active=true]/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=expanded]:opacity-100 md:opacity-0',\n        className,\n      )}\n      {...props}\n    />\n  )\n})\nSidebarMenuAction.displayName = 'SidebarMenuAction'\n\nconst SidebarMenuBadge = React.forwardRef<HTMLDivElement, React.ComponentProps<'div'>>(\n  ({ className, ...props }, ref) => (\n    <div\n      ref={ref}\n      data-sidebar=\"menu-badge\"\n      className={cn(\n        'text-sidebar-foreground pointer-events-none absolute top-1.5 right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums select-none',\n        'peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground',\n        'group-data-[state=collapsed]:group-data-[variant=hidden]:hidden',\n        'group-data-[state=collapsed]:group-data-[variant=default]:opacity-0',\n        className,\n      )}\n      {...props}\n    />\n  ),\n)\nSidebarMenuBadge.displayName = 'SidebarMenuBadge'\n\nconst SidebarMenuSkeleton = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentProps<'div'> & {\n    showIcon?: boolean\n  }\n>(({ className, showIcon = false, ...props }, ref) => {\n  // Random width between 50 to 90%.\n  const width = React.useMemo(() => {\n    return `${Math.floor((window.crypto.getRandomValues(new Uint32Array(1))[0] % 40) + 50)}%`\n  }, [])\n\n  return (\n    <div\n      ref={ref}\n      data-sidebar=\"menu-skeleton\"\n      className={cn('flex h-8 items-center gap-2 rounded-md px-2', className)}\n      {...props}\n    >\n      {showIcon && <Skeleton className=\"size-4 rounded-md\" data-sidebar=\"menu-skeleton-icon\" />}\n      <Skeleton\n        className=\"h-4 max-w-[--skeleton-width] flex-1\"\n        data-sidebar=\"menu-skeleton-text\"\n        style={\n          {\n            '--skeleton-width': width,\n          } as React.CSSProperties\n        }\n      />\n    </div>\n  )\n})\nSidebarMenuSkeleton.displayName = 'SidebarMenuSkeleton'\n\nconst SidebarMenuSub = React.forwardRef<HTMLUListElement, React.ComponentProps<'ul'>>(\n  ({ className, ...props }, ref) => (\n    <ul\n      ref={ref}\n      data-sidebar=\"menu-sub\"\n      className={cn(\n        'border-sidebar-border mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l px-2.5 py-0.5',\n        'group-data-[state=collapsed]:hidden',\n        className,\n      )}\n      {...props}\n    />\n  ),\n)\nSidebarMenuSub.displayName = 'SidebarMenuSub'\n\nconst SidebarMenuSubItem = React.forwardRef<HTMLLIElement, React.ComponentProps<'li'>>(({ ...props }, ref) => (\n  <li ref={ref} {...props} />\n))\nSidebarMenuSubItem.displayName = 'SidebarMenuSubItem'\n\nconst SidebarMenuSubButton = React.forwardRef<\n  HTMLAnchorElement,\n  React.ComponentProps<'a'> & {\n    asChild?: boolean\n    isActive?: boolean\n  }\n>(({ asChild = false, isActive, className, children, ...props }, ref) => {\n  const Comp = asChild ? Slot : 'a'\n\n  return (\n    <Comp\n      ref={ref}\n      data-sidebar=\"menu-sub-button\"\n      data-active={isActive}\n      className={cn(\n        'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 outline-none focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0',\n        'data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground',\n        'group-data-[state=collapsed]:hidden',\n        className,\n      )}\n      {...props}\n    >\n      {typeof children === 'string' ? <Typography variant=\"body-md\">{children}</Typography> : children}\n    </Comp>\n  )\n})\nSidebarMenuSubButton.displayName = 'SidebarMenuSubButton'\n\nexport {\n  SidebarRoot,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupAction,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInput,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuBadge,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSkeleton,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarSeparator,\n  SidebarTrigger,\n  useSidebar,\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAkBA;AACA;AACA;AACA;AACA;AACA;AAYA;AAEA;AACE;AACA;AACE;AAAmE;AAGrE;AACF;AAEA;AAQE;AACA;AAIA;AACA;AACA;AAAsB;AAElB;AACA;AACE;AAAqB;AAErB;AAAkB;AAIpB;AAAgG;AAClG;AACkB;AAIpB;AACE;AAAmE;AAIrE;AACE;AACE;AACE;AACA;AAAc;AAChB;AAGF;AACA;AAAgE;AAKlE;AAEA;AAA2B;AAClB;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACF;AACyE;AAG3E;AAGM;AAAC;AAAA;AAEG;AACqB;AACK;AACrB;AACL;AAE0G;AAC5G;AACI;AAEH;AAAA;AAKX;AACA;AAEA;AAOE;AAEA;AACE;AAEI;AAAC;AAAA;AACc;AACD;AACF;AAER;AACqB;AACrB;AAEF;AAEA;AACE;AAAmB;AAC2B;AAChD;AACuD;AAAA;AAAA;AAE3D;AAIJ;AACE;AAAC;AAAA;AACC;AACU;AACE;AACD;AACG;AAGd;AAAA;AAAC;AAAA;AACY;AACT;AACyB;AACD;AACxB;AACF;AAAA;AACF;AACA;AAAC;AAAA;AACY;AACT;AAEI;AACE;AACyB;AACD;AAE1B;AACE;AACyB;AACD;AAC1B;AACJ;AACA;AACF;AACI;AAIJ;AAAA;AACF;AAAA;AAAA;AAGN;AACA;AAEA;AAA6B;AAEzB;AAEA;AACE;AAAC;AAAA;AACC;AACa;AACL;AACsD;AAE5D;AACA;AAAc;AAChB;AACI;AACO;AAE6B;AAAA;AAC1C;AAGN;AACA;AAEA;AAA0B;AAEtB;AAEA;AACE;AAAC;AAAA;AACC;AACa;AACF;AACD;AACD;AACH;AACK;AACT;AACA;AACA;AACA;AACA;AACA;AACA;AACF;AACI;AAAA;AACN;AAGN;AACA;AAEA;AACE;AACE;AAAC;AAAA;AACC;AACW;AACT;AACA;AACA;AACF;AACI;AAAA;AAGV;AACA;AAEA;AAA2B;AAEvB;AACE;AAAC;AAAA;AACC;AACa;AACF;AACT;AACA;AACF;AACI;AAAA;AACN;AAGN;AACA;AAEA;AACE;AACF;AACA;AAEA;AACE;AACF;AACA;AAEA;AAA+B;AAE3B;AACE;AAAC;AAAA;AACC;AACa;AAC2C;AACpD;AAAA;AACN;AAGN;AACA;AAEA;AACE;AACE;AAAC;AAAA;AACC;AACa;AACF;AACT;AACA;AACA;AACF;AACI;AAAA;AAGV;AACA;AAEA;AACE;AACE;AAAC;AAAA;AACC;AACa;AACuD;AAChE;AAAA;AAGV;AACA;AAEA;AAAgC;AAE5B;AAEA;AACE;AAAC;AAAA;AACC;AACa;AACF;AACT;AACA;AACA;AACA;AACF;AACI;AAOF;AAAA;AAEJ;AAGN;AACA;AAEA;AAAiC;AAE7B;AAEA;AACE;AAAC;AAAA;AACC;AACa;AACF;AACT;AACA;AACA;AACA;AACF;AACI;AAAA;AACN;AAGN;AACA;AAEA;AAAkC;AAIlC;AACA;AAEA;AAGA;AAEA;AAGA;AAEA;AASE;AACA;AAEA;AAAkC;AAChC;AACA;AACY;AACC;AACY;AACV;AACX;AACF;AACiB;AACN;AACX;AACF;AAGF;AACE;AAAC;AAAA;AACC;AACa;AACA;AACkD;AAC3D;AAEH;AAAA;AAIL;AACE;AAAO;AAGT;AACE;AAAU;AACE;AACZ;AAGF;AAEI;AAAgC;AACoE;AAG1G;AACA;AAEA;AAOE;AAEA;AACE;AAAC;AAAA;AACC;AACa;AACF;AACT;AACA;AACA;AAEE;AACF;AACF;AACI;AAAA;AAGV;AACA;AAEA;AAA+B;AAE3B;AAAC;AAAA;AACC;AACa;AACF;AACT;AACA;AACA;AACA;AACA;AACF;AACI;AAAA;AAGV;AACA;AAEA;AAOE;AACE;AAAsF;AAGxF;AACE;AAAC;AAAA;AACC;AACa;AACyD;AAClE;AAEH;AAAsF;AACvF;AAAC;AAAA;AACW;AACG;AAEX;AACsB;AACtB;AAAA;AAEJ;AAAA;AAAA;AAGN;AACA;AAEA;AAA6B;AAEzB;AAAC;AAAA;AACC;AACa;AACF;AACT;AACA;AACA;AACF;AACI;AAAA;AAGV;AACA;AAEA;AAGA;AAEA;AAOE;AAEA;AACE;AAAC;AAAA;AACC;AACa;AACA;AACF;AACT;AACA;AACA;AACA;AACF;AACI;AAEoF;AAAA;AAG9F;AACA;;"}
+{"version":3,"file":"Sidebar.js","sources":["../../../src/components/Sidebar/Sidebar.tsx"],"sourcesContent":["'use client'\n\nimport { Sidebar as SidebarIcon } from '@phosphor-icons/react'\nimport { Slot } from '@radix-ui/react-slot'\nimport { cva } from 'class-variance-authority'\nimport * as React from 'react'\n\nimport { useIsMobile } from '../../lib/useMobile'\nimport { Button } from '../Button'\nimport { Input } from '../Input'\nimport { Separator } from '../Separator'\nimport { SheetContent, SheetDescription, SheetHeader, SheetRoot, SheetTitle } from '../Sheet'\nimport { Skeleton } from '../Skeleton'\nimport { TooltipContent, TooltipProvider, TooltipRoot, TooltipTrigger } from '../Tooltip'\nimport { Typography } from '../Typography'\n\nimport { cn } from '@/lib/utils'\n\nconst SIDEBAR_COOKIE_NAME = 'sidebar_state'\nconst SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7\nconst SIDEBAR_WIDTH = '16rem'\nconst SIDEBAR_WIDTH_MOBILE = '18rem'\nconst SIDEBAR_WIDTH_ICON = '3rem'\nconst SIDEBAR_KEYBOARD_SHORTCUT = 'b'\n\ntype SidebarContext = {\n  state: 'expanded' | 'collapsed'\n  open: boolean\n  setOpen: (open: boolean) => void\n  openMobile: boolean\n  setOpenMobile: (open: boolean) => void\n  isMobile: boolean\n  toggleSidebar: () => void\n}\n\nconst SidebarContext = React.createContext<SidebarContext | null>(null)\n\nfunction useSidebar() {\n  const context = React.useContext(SidebarContext)\n  if (!context) {\n    throw new Error('useSidebar must be used within a SidebarProvider.')\n  }\n\n  return context\n}\n\nconst SidebarProvider = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentProps<'div'> & {\n    defaultOpen?: boolean\n    open?: boolean\n    onOpenChange?: (open: boolean) => void\n  }\n>(({ defaultOpen = true, open: openProp, onOpenChange: setOpenProp, className, style, children, ...props }, ref) => {\n  const isMobile = useIsMobile()\n  const [openMobile, setOpenMobile] = React.useState(false)\n\n  // This is the internal state of the sidebar.\n  // We use openProp and setOpenProp for control from outside the component.\n  const [_open, _setOpen] = React.useState(defaultOpen)\n  const open = openProp ?? _open\n  const setOpen = React.useCallback(\n    (value: boolean | ((value: boolean) => boolean)) => {\n      const openState = typeof value === 'function' ? value(open) : value\n      if (setOpenProp) {\n        setOpenProp(openState)\n      } else {\n        _setOpen(openState)\n      }\n\n      // This sets the cookie to keep the sidebar state.\n      document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`\n    },\n    [setOpenProp, open],\n  )\n\n  // Helper to toggle the sidebar.\n  const toggleSidebar = React.useCallback(() => {\n    isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open)\n  }, [isMobile, setOpen, setOpenMobile])\n\n  // Adds a keyboard shortcut to toggle the sidebar.\n  React.useEffect(() => {\n    const handleKeyDown = (event: KeyboardEvent) => {\n      if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {\n        event.preventDefault()\n        toggleSidebar()\n      }\n    }\n\n    window.addEventListener('keydown', handleKeyDown)\n    return () => window.removeEventListener('keydown', handleKeyDown)\n  }, [toggleSidebar])\n\n  // We add a state so that we can do data-state=\"expanded\" or \"collapsed\".\n  // This makes it easier to style the sidebar with Tailwind classes.\n  const state = open ? 'expanded' : 'collapsed'\n\n  const contextValue = React.useMemo<SidebarContext>(\n    () => ({\n      state,\n      open,\n      setOpen,\n      isMobile,\n      openMobile,\n      setOpenMobile,\n      toggleSidebar,\n    }),\n    [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar],\n  )\n\n  return (\n    <SidebarContext.Provider value={contextValue}>\n      <TooltipProvider delayDuration={0}>\n        <div\n          style={\n            {\n              '--sidebar-width': SIDEBAR_WIDTH,\n              '--sidebar-width-icon': SIDEBAR_WIDTH_ICON,\n              ...style,\n            } as React.CSSProperties\n          }\n          className={cn('group/sidebar-wrapper has-[[data-variant=inset]]:bg-sidebar flex min-h-svh w-full', className)}\n          ref={ref}\n          {...props}\n        >\n          {children}\n        </div>\n      </TooltipProvider>\n    </SidebarContext.Provider>\n  )\n})\nSidebarProvider.displayName = 'SidebarProvider'\n\nconst SidebarRoot = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentProps<'div'> & {\n    side?: 'left' | 'right'\n    variant?: 'default' | 'hidden'\n  }\n>(({ side = 'left', variant = 'default', className, children, ...props }, ref) => {\n  const { isMobile, state, openMobile, setOpenMobile } = useSidebar()\n\n  if (isMobile) {\n    return (\n      <SheetRoot open={openMobile} onOpenChange={setOpenMobile} {...props}>\n        <SheetContent\n          data-sidebar=\"sidebar\"\n          data-mobile=\"true\"\n          className=\"bg-sidebar text-sidebar-foreground w-[var(--sidebar-width)] p-0 [&>button]:hidden\"\n          style={\n            {\n              '--sidebar-width': SIDEBAR_WIDTH_MOBILE,\n            } as React.CSSProperties\n          }\n          side={side}\n        >\n          <SheetHeader className=\"sr-only\">\n            <SheetTitle>Sidebar</SheetTitle>\n            <SheetDescription>Displays the mobile sidebar.</SheetDescription>\n          </SheetHeader>\n          <div className=\"flex h-full w-full flex-col\">{children}</div>\n        </SheetContent>\n      </SheetRoot>\n    )\n  }\n\n  return (\n    <div\n      ref={ref}\n      className=\"group peer text-sidebar-foreground hidden shadow-md md:block\"\n      data-state={state}\n      data-side={side}\n      data-variant={variant}\n    >\n      {/* This is what handles the sidebar gap on desktop */}\n      <div\n        className={cn(\n          'relative w-[var(--sidebar-width)] bg-transparent transition-[width] duration-200 ease-linear',\n          variant === 'default' && 'group-data-[state=collapsed]:w-[var(--sidebar-width-icon)]',\n          variant === 'hidden' && 'group-data-[state=collapsed]:w-0',\n          'group-data-[side=right]:rotate-180',\n        )}\n      />\n      <div\n        className={cn(\n          'fixed inset-y-0 z-10 hidden h-svh w-[var(--sidebar-width)] transition-[left,right,width] duration-200 ease-linear md:flex',\n          side === 'left'\n            ? [\n                'left-0',\n                variant === 'default' && 'group-data-[state=collapsed]:w-[var(--sidebar-width-icon)]',\n                variant === 'hidden' && 'group-data-[state=collapsed]:left-[calc(var(--sidebar-width)*-1)]',\n              ]\n            : [\n                'right-0',\n                variant === 'default' && 'group-data-[state=collapsed]:w-[var(--sidebar-width-icon)]',\n                variant === 'hidden' && 'group-data-[state=collapsed]:right-[calc(var(--sidebar-width)*-1)]',\n              ],\n          'group-data-[side=left]:border-r group-data-[side=right]:border-l',\n          className,\n        )}\n        {...props}\n      >\n        <div data-sidebar=\"sidebar\" className=\"bg-sidebar flex h-full w-full flex-col\">\n          {children}\n        </div>\n      </div>\n    </div>\n  )\n})\nSidebarRoot.displayName = 'SidebarRoot'\n\nconst SidebarTrigger = React.forwardRef<React.ComponentRef<typeof Button>, React.ComponentProps<typeof Button>>(\n  ({ className, onClick, ...props }, ref) => {\n    const { toggleSidebar } = useSidebar()\n\n    return (\n      <Button\n        ref={ref}\n        data-sidebar=\"trigger\"\n        variant=\"text\"\n        className={cn('text-primary-foreground h-8 w-8 p-1', className)}\n        onClick={(event) => {\n          onClick?.(event)\n          toggleSidebar()\n        }}\n        {...props}\n        StartIcon={SidebarIcon}\n      >\n        <span className=\"sr-only\">Toggle Sidebar</span>\n      </Button>\n    )\n  },\n)\nSidebarTrigger.displayName = 'SidebarTrigger'\n\nconst SidebarRail = React.forwardRef<HTMLButtonElement, React.ComponentProps<'button'>>(\n  ({ className, ...props }, ref) => {\n    const { toggleSidebar } = useSidebar()\n\n    return (\n      <button\n        ref={ref}\n        data-sidebar=\"rail\"\n        aria-label=\"Toggle Sidebar\"\n        tabIndex={-1}\n        onClick={toggleSidebar}\n        title=\"Toggle Sidebar\"\n        className={cn(\n          'hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] sm:flex',\n          '[[data-side=left]_&]:cursor-w-resize [[data-side=right]_&]:cursor-e-resize',\n          '[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize',\n          'group-data-[variant=offcanvas]:hover:bg-sidebar group-data-[variant=offcanvas]:translate-x-0 group-data-[variant=offcanvas]:after:left-full',\n          '[[data-side=left][data-variant=offcanvas]_&]:-right-2',\n          '[[data-side=right][data-variant=offcanvas]_&]:-left-2',\n          className,\n        )}\n        {...props}\n      />\n    )\n  },\n)\nSidebarRail.displayName = 'SidebarRail'\n\nconst SidebarInset = React.forwardRef<HTMLDivElement, React.ComponentProps<'main'>>(({ className, ...props }, ref) => {\n  return (\n    <main\n      ref={ref}\n      className={cn(\n        'bg-background relative flex w-full flex-1 flex-col',\n        'md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2',\n        className,\n      )}\n      {...props}\n    />\n  )\n})\nSidebarInset.displayName = 'SidebarInset'\n\nconst SidebarInput = React.forwardRef<React.ComponentRef<typeof Input>, React.ComponentProps<typeof Input>>(\n  ({ className, ...props }, ref) => {\n    return (\n      <Input\n        ref={ref}\n        data-sidebar=\"input\"\n        className={cn(\n          'bg-background focus-visible:ring-sidebar-ring h-8 w-full shadow-none focus-visible:ring-2',\n          className,\n        )}\n        {...props}\n      />\n    )\n  },\n)\nSidebarInput.displayName = 'SidebarInput'\n\nconst SidebarHeader = React.forwardRef<HTMLDivElement, React.ComponentProps<'div'>>(({ className, ...props }, ref) => {\n  return <div ref={ref} data-sidebar=\"header\" className={cn('flex flex-col gap-2 p-2', className)} {...props} />\n})\nSidebarHeader.displayName = 'SidebarHeader'\n\nconst SidebarFooter = React.forwardRef<HTMLDivElement, React.ComponentProps<'div'>>(({ className, ...props }, ref) => {\n  return <div ref={ref} data-sidebar=\"footer\" className={cn('flex flex-col gap-2 p-2', className)} {...props} />\n})\nSidebarFooter.displayName = 'SidebarFooter'\n\nconst SidebarSeparator = React.forwardRef<React.ComponentRef<typeof Separator>, React.ComponentProps<typeof Separator>>(\n  ({ className, ...props }, ref) => {\n    return (\n      <Separator\n        ref={ref}\n        data-sidebar=\"separator\"\n        className={cn('bg-sidebar-border mx-2 w-auto', className)}\n        {...props}\n      />\n    )\n  },\n)\nSidebarSeparator.displayName = 'SidebarSeparator'\n\nconst SidebarContent = React.forwardRef<HTMLDivElement, React.ComponentProps<'div'>>(({ className, ...props }, ref) => {\n  return (\n    <div\n      ref={ref}\n      data-sidebar=\"content\"\n      className={cn(\n        'flex min-h-0 flex-1 flex-col gap-2 overflow-auto',\n        'group-data-[variant=default]:group-data-[state=collapsed]:overflow-hidden',\n        className,\n      )}\n      {...props}\n    />\n  )\n})\nSidebarContent.displayName = 'SidebarContent'\n\nconst SidebarGroup = React.forwardRef<HTMLDivElement, React.ComponentProps<'div'>>(({ className, ...props }, ref) => {\n  return (\n    <div\n      ref={ref}\n      data-sidebar=\"group\"\n      className={cn('relative flex w-full min-w-0 flex-col p-2', className)}\n      {...props}\n    />\n  )\n})\nSidebarGroup.displayName = 'SidebarGroup'\n\nconst SidebarGroupLabel = React.forwardRef<HTMLDivElement, React.ComponentProps<'div'> & { asChild?: boolean }>(\n  ({ className, asChild = false, children, ...props }, ref) => {\n    const Comp = asChild ? Slot : 'div'\n\n    return (\n      <Comp\n        ref={ref}\n        data-sidebar=\"group-label\"\n        className={cn(\n          'text-sidebar-foreground/70 ring-sidebar-ring flex h-8 shrink-0 items-center rounded-md px-2 transition-[margin,opacity] duration-200 ease-linear outline-none focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',\n          'group-data-[state=collapsed]:group-data-[variant=hidden]:hidden',\n          'group-data-[state=collapsed]:group-data-[variant=default]:-mt-8 group-data-[state=collapsed]:group-data-[variant=default]:opacity-0',\n          className,\n        )}\n        {...props}\n      >\n        {typeof children === 'string' ? (\n          <Typography variant=\"label-md\" color=\"secondary\">\n            {children}\n          </Typography>\n        ) : (\n          children\n        )}\n      </Comp>\n    )\n  },\n)\nSidebarGroupLabel.displayName = 'SidebarGroupLabel'\n\nconst SidebarGroupAction = React.forwardRef<HTMLButtonElement, React.ComponentProps<'button'> & { asChild?: boolean }>(\n  ({ className, asChild = false, ...props }, ref) => {\n    const Comp = asChild ? Slot : 'button'\n\n    return (\n      <Comp\n        ref={ref}\n        data-sidebar=\"group-action\"\n        className={cn(\n          'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 transition-transform outline-none focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',\n          'after:absolute after:-inset-2 after:md:hidden',\n          'group-data-[state=collapsed]:hidden',\n          className,\n        )}\n        {...props}\n      />\n    )\n  },\n)\nSidebarGroupAction.displayName = 'SidebarGroupAction'\n\nconst SidebarGroupContent = React.forwardRef<HTMLDivElement, React.ComponentProps<'div'>>(\n  ({ className, ...props }, ref) => (\n    <div ref={ref} data-sidebar=\"group-content\" className={cn('w-full text-sm', className)} {...props} />\n  ),\n)\nSidebarGroupContent.displayName = 'SidebarGroupContent'\n\nconst SidebarMenu = React.forwardRef<HTMLUListElement, React.ComponentProps<'ul'>>(({ className, ...props }, ref) => (\n  <ul ref={ref} data-sidebar=\"menu\" className={cn('flex w-full min-w-0 flex-col gap-1', className)} {...props} />\n))\nSidebarMenu.displayName = 'SidebarMenu'\n\nconst SidebarMenuItem = React.forwardRef<HTMLLIElement, React.ComponentProps<'li'>>(({ className, ...props }, ref) => (\n  <li ref={ref} data-sidebar=\"menu-item\" className={cn('group/menu-item relative', className)} {...props} />\n))\nSidebarMenuItem.displayName = 'SidebarMenuItem'\n\nconst SidebarMenuButton = React.forwardRef<\n  HTMLButtonElement,\n  React.ComponentProps<'button'> & {\n    asChild?: boolean\n    isActive?: boolean\n    tooltip?: string | React.ComponentProps<typeof TooltipContent>\n    variant?: 'navigation-item' | 'element'\n  }\n>(({ asChild = false, isActive = false, tooltip, className, children, variant = 'navigation-item', ...props }, ref) => {\n  const Comp = asChild ? Slot : 'button'\n  const { isMobile, state } = useSidebar()\n\n  const sidebarMenuButtonVariants = cva(\n    'peer/menu-button flex w-full text-sm hover:bg-sidebar-accent hover:text-sidebar-accent-foreground items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=expanded]:hover:bg-sidebar-accent data-[state=expanded]:hover:text-sidebar-accent-foreground [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0',\n    {\n      variants: {\n        variant: {\n          'navigation-item': 'h-8',\n          element: 'group-data-[state=collapsed]:!p-0',\n        },\n      },\n      defaultVariants: {\n        variant: 'navigation-item',\n      },\n    },\n  )\n\n  const button = (\n    <Comp\n      ref={ref}\n      data-sidebar=\"menu-button\"\n      data-active={isActive}\n      className={cn(sidebarMenuButtonVariants({ variant }), className)}\n      {...props}\n    >\n      {children}\n    </Comp>\n  )\n\n  if (!tooltip) {\n    return button\n  }\n\n  if (typeof tooltip === 'string') {\n    tooltip = {\n      children: tooltip,\n    }\n  }\n\n  return (\n    <TooltipRoot>\n      <TooltipTrigger asChild>{button}</TooltipTrigger>\n      <TooltipContent side=\"right\" align=\"center\" hidden={state !== 'collapsed' || isMobile} {...tooltip} />\n    </TooltipRoot>\n  )\n})\nSidebarMenuButton.displayName = 'SidebarMenuButton'\n\nconst SidebarMenuAction = React.forwardRef<\n  HTMLButtonElement,\n  React.ComponentProps<'button'> & {\n    asChild?: boolean\n    showOnHover?: boolean\n  }\n>(({ className, asChild = false, showOnHover = false, ...props }, ref) => {\n  const Comp = asChild ? Slot : 'button'\n\n  return (\n    <Comp\n      ref={ref}\n      data-sidebar=\"menu-action\"\n      className={cn(\n        'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 transition-transform outline-none focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',\n        'after:absolute after:-inset-2 after:md:hidden',\n        'group-data-[state=collapsed]:hidden',\n        showOnHover &&\n          'peer-data-[active=true]/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=expanded]:opacity-100 md:opacity-0',\n        className,\n      )}\n      {...props}\n    />\n  )\n})\nSidebarMenuAction.displayName = 'SidebarMenuAction'\n\nconst SidebarMenuBadge = React.forwardRef<HTMLDivElement, React.ComponentProps<'div'>>(\n  ({ className, ...props }, ref) => (\n    <div\n      ref={ref}\n      data-sidebar=\"menu-badge\"\n      className={cn(\n        'text-sidebar-foreground pointer-events-none absolute top-1.5 right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums select-none',\n        'peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground',\n        'group-data-[state=collapsed]:group-data-[variant=hidden]:hidden',\n        'group-data-[state=collapsed]:group-data-[variant=default]:opacity-0',\n        className,\n      )}\n      {...props}\n    />\n  ),\n)\nSidebarMenuBadge.displayName = 'SidebarMenuBadge'\n\nconst SidebarMenuSkeleton = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentProps<'div'> & {\n    showIcon?: boolean\n  }\n>(({ className, showIcon = false, ...props }, ref) => {\n  // Random width between 50 to 90%.\n  const width = React.useMemo(() => {\n    return `${Math.floor((window.crypto.getRandomValues(new Uint32Array(1))[0] % 40) + 50)}%`\n  }, [])\n\n  return (\n    <div\n      ref={ref}\n      data-sidebar=\"menu-skeleton\"\n      className={cn('flex h-8 items-center gap-2 rounded-md px-2', className)}\n      {...props}\n    >\n      {showIcon && <Skeleton className=\"size-4 rounded-md\" data-sidebar=\"menu-skeleton-icon\" />}\n      <Skeleton\n        className=\"h-4 max-w-[var(--skeleton-width)] flex-1\"\n        data-sidebar=\"menu-skeleton-text\"\n        style={\n          {\n            '--skeleton-width': width,\n          } as React.CSSProperties\n        }\n      />\n    </div>\n  )\n})\nSidebarMenuSkeleton.displayName = 'SidebarMenuSkeleton'\n\nconst SidebarMenuSub = React.forwardRef<HTMLUListElement, React.ComponentProps<'ul'>>(\n  ({ className, ...props }, ref) => (\n    <ul\n      ref={ref}\n      data-sidebar=\"menu-sub\"\n      className={cn(\n        'border-sidebar-border mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l px-2.5 py-0.5',\n        'group-data-[state=collapsed]:hidden',\n        className,\n      )}\n      {...props}\n    />\n  ),\n)\nSidebarMenuSub.displayName = 'SidebarMenuSub'\n\nconst SidebarMenuSubItem = React.forwardRef<HTMLLIElement, React.ComponentProps<'li'>>(({ ...props }, ref) => (\n  <li ref={ref} {...props} />\n))\nSidebarMenuSubItem.displayName = 'SidebarMenuSubItem'\n\nconst SidebarMenuSubButton = React.forwardRef<\n  HTMLAnchorElement,\n  React.ComponentProps<'a'> & {\n    asChild?: boolean\n    isActive?: boolean\n  }\n>(({ asChild = false, isActive, className, children, ...props }, ref) => {\n  const Comp = asChild ? Slot : 'a'\n\n  return (\n    <Comp\n      ref={ref}\n      data-sidebar=\"menu-sub-button\"\n      data-active={isActive}\n      className={cn(\n        'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 outline-none focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0',\n        'data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground',\n        'group-data-[state=collapsed]:hidden',\n        className,\n      )}\n      {...props}\n    >\n      {typeof children === 'string' ? <Typography variant=\"body-md\">{children}</Typography> : children}\n    </Comp>\n  )\n})\nSidebarMenuSubButton.displayName = 'SidebarMenuSubButton'\n\nexport {\n  SidebarRoot,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupAction,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInput,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuBadge,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSkeleton,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarSeparator,\n  SidebarTrigger,\n  useSidebar,\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAkBA;AACA;AACA;AACA;AACA;AACA;AAYA;AAEA;AACE;AACA;AACE;AAAmE;AAGrE;AACF;AAEA;AAQE;AACA;AAIA;AACA;AACA;AAAsB;AAElB;AACA;AACE;AAAqB;AAErB;AAAkB;AAIpB;AAAgG;AAClG;AACkB;AAIpB;AACE;AAAmE;AAIrE;AACE;AACE;AACE;AACA;AAAc;AAChB;AAGF;AACA;AAAgE;AAKlE;AAEA;AAA2B;AAClB;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACF;AACyE;AAG3E;AAGM;AAAC;AAAA;AAEG;AACqB;AACK;AACrB;AACL;AAE0G;AAC5G;AACI;AAEH;AAAA;AAKX;AACA;AAEA;AAOE;AAEA;AACE;AAEI;AAAC;AAAA;AACc;AACD;AACF;AAER;AACqB;AACrB;AAEF;AAEA;AACE;AAAmB;AAC2B;AAChD;AACuD;AAAA;AAAA;AAE3D;AAIJ;AACE;AAAC;AAAA;AACC;AACU;AACE;AACD;AACG;AAGd;AAAA;AAAC;AAAA;AACY;AACT;AACyB;AACD;AACxB;AACF;AAAA;AACF;AACA;AAAC;AAAA;AACY;AACT;AAEI;AACE;AACyB;AACD;AAE1B;AACE;AACyB;AACD;AAC1B;AACJ;AACA;AACF;AACI;AAIJ;AAAA;AACF;AAAA;AAAA;AAGN;AACA;AAEA;AAA6B;AAEzB;AAEA;AACE;AAAC;AAAA;AACC;AACa;AACL;AACsD;AAE5D;AACA;AAAc;AAChB;AACI;AACO;AAE6B;AAAA;AAC1C;AAGN;AACA;AAEA;AAA0B;AAEtB;AAEA;AACE;AAAC;AAAA;AACC;AACa;AACF;AACD;AACD;AACH;AACK;AACT;AACA;AACA;AACA;AACA;AACA;AACA;AACF;AACI;AAAA;AACN;AAGN;AACA;AAEA;AACE;AACE;AAAC;AAAA;AACC;AACW;AACT;AACA;AACA;AACF;AACI;AAAA;AAGV;AACA;AAEA;AAA2B;AAEvB;AACE;AAAC;AAAA;AACC;AACa;AACF;AACT;AACA;AACF;AACI;AAAA;AACN;AAGN;AACA;AAEA;AACE;AACF;AACA;AAEA;AACE;AACF;AACA;AAEA;AAA+B;AAE3B;AACE;AAAC;AAAA;AACC;AACa;AAC2C;AACpD;AAAA;AACN;AAGN;AACA;AAEA;AACE;AACE;AAAC;AAAA;AACC;AACa;AACF;AACT;AACA;AACA;AACF;AACI;AAAA;AAGV;AACA;AAEA;AACE;AACE;AAAC;AAAA;AACC;AACa;AACuD;AAChE;AAAA;AAGV;AACA;AAEA;AAAgC;AAE5B;AAEA;AACE;AAAC;AAAA;AACC;AACa;AACF;AACT;AACA;AACA;AACA;AACF;AACI;AAOF;AAAA;AAEJ;AAGN;AACA;AAEA;AAAiC;AAE7B;AAEA;AACE;AAAC;AAAA;AACC;AACa;AACF;AACT;AACA;AACA;AACA;AACF;AACI;AAAA;AACN;AAGN;AACA;AAEA;AAAkC;AAIlC;AACA;AAEA;AAGA;AAEA;AAGA;AAEA;AASE;AACA;AAEA;AAAkC;AAChC;AACA;AACY;AACC;AACY;AACV;AACX;AACF;AACiB;AACN;AACX;AACF;AAGF;AACE;AAAC;AAAA;AACC;AACa;AACA;AACkD;AAC3D;AAEH;AAAA;AAIL;AACE;AAAO;AAGT;AACE;AAAU;AACE;AACZ;AAGF;AAEI;AAAgC;AACoE;AAG1G;AACA;AAEA;AAOE;AAEA;AACE;AAAC;AAAA;AACC;AACa;AACF;AACT;AACA;AACA;AAEE;AACF;AACF;AACI;AAAA;AAGV;AACA;AAEA;AAA+B;AAE3B;AAAC;AAAA;AACC;AACa;AACF;AACT;AACA;AACA;AACA;AACA;AACF;AACI;AAAA;AAGV;AACA;AAEA;AAOE;AACE;AAAsF;AAGxF;AACE;AAAC;AAAA;AACC;AACa;AACyD;AAClE;AAEH;AAAsF;AACvF;AAAC;AAAA;AACW;AACG;AAEX;AACsB;AACtB;AAAA;AAEJ;AAAA;AAAA;AAGN;AACA;AAEA;AAA6B;AAEzB;AAAC;AAAA;AACC;AACa;AACF;AACT;AACA;AACA;AACF;AACI;AAAA;AAGV;AACA;AAEA;AAGA;AAEA;AAOE;AAEA;AACE;AAAC;AAAA;AACC;AACa;AACA;AACF;AACT;AACA;AACA;AACA;AACF;AACI;AAEoF;AAAA;AAG9F;AACA;;"}

package/dist/theme.css

@@ -1,130 +1,130 @@
 @theme {
   --font-family-sans: var(--font-onest), sans-serif;
   --font-family-onest: var(--font-onest), sans-serif;
-  
-  --color-foreground: #1D1D1B;
-  --color-white: #FFFFFF;
-  --color-card: #F7F7F6;
-  --color-card-foreground: #1D1D1B;
-  --color-popover: #F7F7F6;
-  --color-popover-foreground: #1D1D1B;
-  
-  --color-neutral-50: #F7F7F6;
-  --color-neutral-100: #E4E4E3;
-  --color-neutral-200: #C9C9C6;
-  --color-neutral-300: #A7A6A1;
-  --color-neutral-400: #84837D;
+
+  --color-foreground: #1d1d1b;
+  --color-white: #ffffff;
+  --color-card: #f7f7f6;
+  --color-card-foreground: #1d1d1b;
+  --color-popover: #f7f7f6;
+  --color-popover-foreground: #1d1d1b;
+
+  --color-neutral-50: #f7f7f6;
+  --color-neutral-100: #e4e4e3;
+  --color-neutral-200: #c9c9c6;
+  --color-neutral-300: #a7a6a1;
+  --color-neutral-400: #84837d;
   --color-neutral-500: #696963;
-  --color-neutral-600: #53534E;
+  --color-neutral-600: #53534e;
   --color-neutral-700: #454440;
   --color-neutral-800: #393936;
-  --color-neutral-900: #32322F;
-  --color-neutral-950: #1D1D1B;
+  --color-neutral-900: #32322f;
+  --color-neutral-950: #1d1d1b;
   --color-neutral: #696963;
-  --color-neutral-foreground: #F7F7F6;
-  
-  --color-primary-50: #FFF0DE;
-  --color-primary-100: #FFE182;
-  --color-primary-200: #FFD685;
-  --color-primary-300: #FFCE59;
-  --color-primary-400: #FFC92F;
-  --color-primary-500: #FBBA00;
-  --color-primary-600: #F1A100;
-  --color-primary-700: #F8A800;
-  --color-primary-800: #FAA100;
-  --color-primary-900: #F19700;
-  --color-primary-950: #ED8C00;
-  --color-primary: #FBBA00;
-  --color-primary-foreground: #1D1D1B;
-  
-  --color-accent-50: #FFD5A8;
-  --color-accent-100: #FFCC93;
-  --color-accent-200: #FFB86A;
-  --color-accent-300: #FFA542;
-  --color-accent-400: #FF9119;
-  --color-accent-500: #F77D00;
-  --color-accent-600: #D57000;
-  --color-accent-700: #BC6200;
-  --color-accent-800: #A35500;
+  --color-neutral-foreground: #f7f7f6;
+
+  --color-primary-50: #fff0de;
+  --color-primary-100: #ffe182;
+  --color-primary-200: #ffd685;
+  --color-primary-300: #ffce59;
+  --color-primary-400: #ffc92f;
+  --color-primary-500: #fbba00;
+  --color-primary-600: #f1a100;
+  --color-primary-700: #f8a800;
+  --color-primary-800: #faa100;
+  --color-primary-900: #f19700;
+  --color-primary-950: #ed8c00;
+  --color-primary: #fbba00;
+  --color-primary-foreground: #1d1d1b;
+
+  --color-accent-50: #ffd5a8;
+  --color-accent-100: #ffcc93;
+  --color-accent-200: #ffb86a;
+  --color-accent-300: #ffa542;
+  --color-accent-400: #ff9119;
+  --color-accent-500: #f77d00;
+  --color-accent-600: #d57000;
+  --color-accent-700: #bc6200;
+  --color-accent-800: #a35500;
   --color-accent-900: #894800;
-  --color-accent-950: #7C4100;
-  --color-accent: #F77D00;
-  --color-accent-foreground: #1D1D1B;
-  
-  --color-success-50: #F2FBF2;
-  --color-success-100: #E1F8E0;
-  --color-success-200: #C5EFC3;
-  --color-success-300: #90E194;
-  --color-success-400: #5FCB5D;
-  --color-success-500: #2EC03C;
+  --color-accent-950: #7c4100;
+  --color-accent: #f77d00;
+  --color-accent-foreground: #1d1d1b;
+
+  --color-success-50: #f2fbf2;
+  --color-success-100: #e1f8e0;
+  --color-success-200: #c5efc3;
+  --color-success-300: #90e194;
+  --color-success-400: #5fcb5d;
+  --color-success-500: #2ec03c;
   --color-success-600: #299128;
   --color-success-700: #247223;
-  --color-success-800: #215B20;
-  --color-success-900: #1C4B1D;
-  --color-success-950: #0A290B;
+  --color-success-800: #215b20;
+  --color-success-900: #1c4b1d;
+  --color-success-950: #0a290b;
   --color-success: #247223;
-  --color-success-foreground: #FFFFFF;
-  
-  --color-warning-50: #FCF5EE;
-  --color-warning-100: #F7E4CE;
-  --color-warning-200: #EEC799;
-  --color-warning-300: #E6A563;
-  --color-warning-400: #DE8334;
-  --color-warning-500: #D76929;
-  --color-warning-600: #BE4D21;
-  --color-warning-700: #9E331F;
-  --color-warning-800: #812B1F;
-  --color-warning-900: #6B251C;
-  --color-warning-950: #3D100B;
-  --color-warning: #D76929;
-  --color-warning-foreground: #FFFFFF;
-  
-  --color-error-50: #FEF2F2;
-  --color-error-100: #FEE2E2;
-  --color-error-200: #FFC9C9;
-  --color-error-300: #FDA4A4;
-  --color-error-400: #FA6F70;
-  --color-error-500: #F13637;
-  --color-error-600: #DF2324;
-  --color-error-700: #BC191A;
-  --color-error-800: #9B191A;
-  --color-error-900: #811B1C;
+  --color-success-foreground: #ffffff;
+
+  --color-warning-50: #fcf5ee;
+  --color-warning-100: #f7e4ce;
+  --color-warning-200: #eec799;
+  --color-warning-300: #e6a563;
+  --color-warning-400: #de8334;
+  --color-warning-500: #d76929;
+  --color-warning-600: #be4d21;
+  --color-warning-700: #9e331f;
+  --color-warning-800: #812b1f;
+  --color-warning-900: #6b251c;
+  --color-warning-950: #3d100b;
+  --color-warning: #d76929;
+  --color-warning-foreground: #ffffff;
+
+  --color-error-50: #fef2f2;
+  --color-error-100: #fee2e2;
+  --color-error-200: #ffc9c9;
+  --color-error-300: #fda4a4;
+  --color-error-400: #fa6f70;
+  --color-error-500: #f13637;
+  --color-error-600: #df2324;
+  --color-error-700: #bc191a;
+  --color-error-800: #9b191a;
+  --color-error-900: #811b1c;
   --color-error-950: #460909;
-  --color-error: #BC191A;
-  --color-error-foreground: #FFFFFF;
-  
-  --color-background-50: #FFFFFF;
-  --color-background-100: #FBFBFB;
-  --color-background-200: #FEF0D6;
-  --color-background-300: #FDE1AE;
-  --color-background-400: #FCD386;
-  --color-background-500: #FBC45F;
-  --color-background-600: #FAB637;
-  --color-background-700: #F9A70F;
-  --color-background-800: #DA8F05;
-  --color-background-900: #B27504;
-  --color-background-950: #9E6804;
-  --color-background: #FBC45F;
-  --color-background-foreground: #1D1D1B;
-  
-  --color-sidebar: #FFFFFF;
-  --color-sidebar-foreground: #1D1D1B;
-  --color-sidebar-primary: #F7F7F6;
-  --color-sidebar-primary-foreground: #1D1D1B;
-  --color-sidebar-accent: #F7F7F6;
-  --color-sidebar-accent-foreground: #1D1D1B;
-  --color-sidebar-border: #E4E4E3;
-  --color-sidebar-ring: #FAB700;
-  
-  --color-border: #E4E4E3;
-  --color-input: #F7F7F6;
-  --color-ring: #FAB700;
-  
+  --color-error: #bc191a;
+  --color-error-foreground: #ffffff;
+
+  --color-background-50: #ffffff;
+  --color-background-100: #fbfbfb;
+  --color-background-200: #fef0d6;
+  --color-background-300: #fde1ae;
+  --color-background-400: #fcd386;
+  --color-background-500: #fbc45f;
+  --color-background-600: #fab637;
+  --color-background-700: #f9a70f;
+  --color-background-800: #da8f05;
+  --color-background-900: #b27504;
+  --color-background-950: #9e6804;
+  --color-background: #fbc45f;
+  --color-background-foreground: #1d1d1b;
+
+  --color-sidebar: #ffffff;
+  --color-sidebar-foreground: #1d1d1b;
+  --color-sidebar-primary: #f7f7f6;
+  --color-sidebar-primary-foreground: #1d1d1b;
+  --color-sidebar-accent: #f7f7f6;
+  --color-sidebar-accent-foreground: #1d1d1b;
+  --color-sidebar-border: #e4e4e3;
+  --color-sidebar-ring: #fab700;
+
+  --color-border: #e4e4e3;
+  --color-input: #f7f7f6;
+  --color-ring: #fab700;
+
   --shadow-tooltip: 0 2px 5px 2px rgba(0, 0, 0, 0.1);
   --shadow-toast: 0 4px 12px #0000001a;
-  
+
   --width-1_5: 1.5px;
-  
+
   --animate-marquee: marquee 60s infinite linear;
   --animate-marquee-vertical: marquee-vertical 60s linear infinite;
   --animate-accordion-down: accordion-down 0.2s ease-out;
@@ -135,51 +135,115 @@
   --animate-indeterminate: indeterminate 2s infinite linear;
 
   @keyframes marquee {
-    from { transform: translateX(0); }
-    to { transform: translateX(calc(-100% - var(--gap))); }
+    from {
+      transform: translateX(0);
+    }
+    to {
+      transform: translateX(calc(-100% - var(--gap)));
+    }
   }
 
   @keyframes marquee-vertical {
-    from { transform: translateY(0); }
-    to { transform: translateY(calc(-100% - var(--gap))); }
+    from {
+      transform: translateY(0);
+    }
+    to {
+      transform: translateY(calc(-100% - var(--gap)));
+    }
   }
 
   @keyframes accordion-down {
-    from { height: 0; }
-    to { height: var(--radix-accordion-content-height); }
+    from {
+      height: 0;
+    }
+    to {
+      height: var(--radix-accordion-content-height);
+    }
   }
 
   @keyframes accordion-up {
-    from { height: var(--radix-accordion-content-height); }
-    to { height: 0; }
+    from {
+      height: var(--radix-accordion-content-height);
+    }
+    to {
+      height: 0;
+    }
   }
 
   @keyframes shine {
-    0% { background-position: 200% 0; }
-    100% { background-position: -100% 0; }
+    0% {
+      background-position: 200% 0;
+    }
+    100% {
+      background-position: -100% 0;
+    }
   }
 
   @keyframes shine-infinite {
-    0% { background-position: 200% 0; }
-    10% { background-position: -100% 0; }
-    100% { background-position: -100% 0; }
+    0% {
+      background-position: 200% 0;
+    }
+    10% {
+      background-position: -100% 0;
+    }
+    100% {
+      background-position: -100% 0;
+    }
   }
 
   @keyframes icon-down-up {
-    0% { transform: translateY(0%); }
-    50% { transform: translateY(100%); }
-    50.01% { transform: translateY(-100%); }
-    100% { transform: translateY(0%); }
+    0% {
+      transform: translateY(0%);
+    }
+    50% {
+      transform: translateY(100%);
+    }
+    50.01% {
+      transform: translateY(-100%);
+    }
+    100% {
+      transform: translateY(0%);
+    }
   }
 
   @keyframes indeterminate {
-    0% { transform: translateX(-100%); }
-    50% { transform: translateX(0); }
-    100% { transform: translateX(100%); }
+    0% {
+      transform: translateX(-100%);
+    }
+    50% {
+      transform: translateX(0);
+    }
+    100% {
+      transform: translateX(100%);
+    }
   }
 }
 
 @font-face {
   font-family: 'Onest';
   src: url('./fonts/Onest.woff2');
-}  
+}
+
+@layer base {
+  input[type='number']::-webkit-inner-spin-button,
+  input[type='number']::-webkit-outer-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
+
+@layer utilities {
+  .scrollbar-none::-webkit-scrollbar {
+    width: 0px;
+  }
+}
+
+:root {
+  --font-onest: 'Onest';
+}

package/package.json

@@ -2,7 +2,7 @@
   "name": "periplo-ui",
   "description": "IATI UI library",
   "private": false,
-  "version": "3.27.1",
+  "version": "3.27.3",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -130,6 +130,7 @@
     "react-hook-form": "7.59.0",
     "sonner": "2.0.5",
     "tailwind-merge": "3.3.1",
+    "tw-animate-css": "^1.3.5",
     "zod": "3.25.67"
   }
 }

package/dist/components/DataTable/types.d.js

@@ -1,2 +0,0 @@
-
-//# sourceMappingURL=types.d.js.map

package/dist/components/DataTable/types.d.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"types.d.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}