@atom-learning/components 2.29.1-beta.0 → 2.29.1

package/dist/components/data-table/DataTable.types.d.ts

@@ -1,6 +1,5 @@
-import type { Table } from '@tanstack/react-table';
+import type { ColumnOrderTableState, ColumnPinningTableState, ColumnSizingTableState, ExpandedTableState, FiltersTableState, GroupingTableState, PaginationTableState, RowSelectionTableState, SortDirection, SortingTableState, Table, VisibilityTableState } from '@tanstack/react-table';
 import * as React from 'react';
-import type { VisibilityTableState, ColumnOrderTableState, ColumnPinningTableState, FiltersTableState, SortingTableState, ExpandedTableState, GroupingTableState, ColumnSizingTableState, PaginationTableState, RowSelectionTableState, SortDirection } from '@tanstack/react-table';
 export declare enum AsyncDataState {
     NONE = "none",
     PENDING = "pending",

package/dist/components/data-table/DataTableContext.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { DataTableContextType, TDefaultSort, TGetAsyncData, TableData, InitialState } from './DataTable.types';
+import { DataTableContextType, InitialState, TableData, TDefaultSort, TGetAsyncData } from './DataTable.types';
 declare type DataTableProviderProps = {
     columns: any;
     defaultSort?: TDefaultSort;

package/dist/{lib/src/components → components}/data-table/DataTableContext.js

@@ -1 +1 @@
-import*as t from"react";import N from"use-deep-compare-effect";import{useReactTable as I,getCoreRowModel as x,getPaginationRowModel as A,getSortedRowModel as G,getFilteredRowModel as L}from"@tanstack/react-table";import{AsyncDataState as l}from"./DataTable.types.js";import{getNewAsyncData as z}from"./getNewAsyncData.js";import{useSortByColumn as k}from"./useSorting.js";import{usePagination as B}from"./usePagination.js";const w=t.createContext(null),J=({columns:n,data:a=[],getAsyncData:o,defaultSort:P,initialState:s=void 0,children:y})=>{var b;const[g,u]=t.useState({results:a!=null?a:[],total:(b=a==null?void 0:a.length)!=null?b:0}),{isPaginated:i,applyPagination:D,paginationState:e,setPaginationState:C}=B(s==null?void 0:s.pagination),[f,d]=t.useState(l.NONE),[c,h]=t.useState(""),{setIsSortable:E,isSortable:S,sorting:r,setSorting:M}=k(P),m=t.useCallback(async F=>{if(o)try{d(l.PENDING);const T=await z(o,F,e,r,c);u(T),d(l.FULFILLED)}catch{d(l.REJECTED)}},[o,e==null?void 0:e.pageIndex,e==null?void 0:e.pageSize,r,c]);t.useEffect(()=>{m({})},[m]),N(()=>{!a||u({results:a,total:a.length})},[a]);const p=()=>g.total,v=I({columns:n,data:g.results,pageCount:e?Math.ceil(p()/e.pageSize):-1,initialState:s,state:{sorting:r,globalFilter:c,pagination:e},manualPagination:o&&i,manualSorting:o&&i,enableSorting:f!==l.PENDING,enableGlobalFilter:!o,getCoreRowModel:x(),getPaginationRowModel:i?A():void 0,getSortedRowModel:S||r.length?G():void 0,getFilteredRowModel:L(),onPaginationChange:i?C:void 0,onSortingChange:M,onGlobalFilterChange:h}),R=t.useMemo(()=>({...v,data:g,setData:u,setIsSortable:E,applyPagination:D,getTotalRows:p,isSortable:S,asyncDataState:f,runAsyncData:m}),[v,D,p,S]);return t.createElement(w.Provider,{value:R},y)},O=()=>{const n=t.useContext(w);if(!n)throw new Error("useDataTable can only be called from inside a DataTableProvider");return n};export{J as DataTableProvider,O as useDataTable};
+import{useReactTable as N,getCoreRowModel as I,getPaginationRowModel as x,getSortedRowModel as A,getFilteredRowModel as G}from"@tanstack/react-table";import*as t from"react";import L from"use-deep-compare-effect";import{AsyncDataState as l}from"./DataTable.types.js";import{getNewAsyncData as k}from"./getNewAsyncData.js";import{usePagination as z}from"./usePagination.js";import{useSortByColumn as B}from"./useSorting.js";const w=t.createContext(null),J=({columns:n,data:a=[],getAsyncData:o,defaultSort:P,initialState:s=void 0,children:y})=>{var b;const[g,u]=t.useState({results:a!=null?a:[],total:(b=a==null?void 0:a.length)!=null?b:0}),{isPaginated:i,applyPagination:D,paginationState:e,setPaginationState:C}=z(s==null?void 0:s.pagination),[f,d]=t.useState(l.NONE),[c,h]=t.useState(""),{setIsSortable:E,isSortable:S,sorting:r,setSorting:M}=B(P),m=t.useCallback(async T=>{if(o)try{d(l.PENDING);const F=await k(o,T,e,r,c);u(F),d(l.FULFILLED)}catch{d(l.REJECTED)}},[o,e==null?void 0:e.pageIndex,e==null?void 0:e.pageSize,r,c]);t.useEffect(()=>{m({})},[m]),L(()=>{!a||u({results:a,total:a.length})},[a]);const p=()=>g.total,v=N({columns:n,data:g.results,pageCount:e?Math.ceil(p()/e.pageSize):-1,initialState:s,state:{sorting:r,globalFilter:c,pagination:e},manualPagination:o&&i,manualSorting:o&&i,enableSorting:f!==l.PENDING,enableGlobalFilter:!o,getCoreRowModel:I(),getPaginationRowModel:i?x():void 0,getSortedRowModel:S||r.length?A():void 0,getFilteredRowModel:G(),onPaginationChange:i?C:void 0,onSortingChange:M,onGlobalFilterChange:h}),R=t.useMemo(()=>({...v,data:g,setData:u,setIsSortable:E,applyPagination:D,getTotalRows:p,isSortable:S,asyncDataState:f,runAsyncData:m}),[v,D,p,S]);return t.createElement(w.Provider,{value:R},y)},O=()=>{const n=t.useContext(w);if(!n)throw new Error("useDataTable can only be called from inside a DataTableProvider");return n};export{J as DataTableProvider,O as useDataTable};

package/dist/components/data-table/DataTableDataCell.d.ts

@@ -1,5 +1,5 @@
-import * as React from 'react';
 import type { Cell } from '@tanstack/react-table';
+import * as React from 'react';
 declare type DataTableDataCellProps = {
     cell: Cell<Record<string, unknown>, unknown>;
 };

package/dist/components/data-table/DataTableDataCell.js

@@ -0,0 +1 @@
+import{flexRender as l}from"@tanstack/react-table";import*as o from"react";import{Table as t}from"../table/Table.js";const m=({cell:e})=>o.createElement(t.Cell,{key:e.id},l(e.column.columnDef.cell,e.getContext()));export{m as DataTableDataCell};

package/dist/components/data-table/DataTableGlobalFilter.js

@@ -0,0 +1 @@
+import*as e from"react";import{debounce as p}from"throttle-debounce";import{OptionallyVisuallyHiddenContainer as u}from"../../utilities/optionally-visually-hidden-container/OptionallyVisuallyHiddenContainer.js";import{Label as g}from"../label/Label.js";import{SearchInput as d}from"../search-input/SearchInput.js";import{useDataTable as f}from"./DataTableContext.js";const h=({onChange:a,label:t,hideLabel:r=!1,...n})=>{const{setGlobalFilter:o,getState:m,resetPagination:i}=f(),{globalFilter:b}=m(),s=p(250,l=>{const{target:{value:c}}=l;a==null||a(l),i(),o(c)});return e.createElement(e.Fragment,null,e.createElement(u,{hidden:r},e.createElement(g,{css:{mb:"$3"},htmlFor:t},t)),e.createElement(d,{...n,value:b,onChange:s,name:t}))};export{h as DataTableGlobalFilter};

package/dist/{lib/src/components → components}/data-table/DataTableHeaderCell.js

@@ -1 +1 @@
-import{flexRender as s}from"@tanstack/react-table";import*as t from"react";import{Flex as l}from"../flex/Flex.js";import{Table as m}from"../table/Table.js";import{Icon as a}from"../icon/Icon.js";import{SortUp as d,SortDown as p}from"@atom-learning/icons";import{useDataTable as f}from"./DataTableContext.js";const u={asc:d,desc:p},g=({direction:e})=>t.createElement(a,{is:u[e],size:"sm",css:{position:"absolute",left:"$1"}}),b=({header:e,children:C,css:i,...c})=>{const r=e.column.getIsSorted(),{isSortable:o}=f(),n=e.column.getCanSort();return t.createElement(m.HeaderCell,{onClick:o&&n?e.column.getToggleSortingHandler():void 0,css:{cursor:o&&n?"pointer":"initial",...i},...c},t.createElement(l,{css:{alignItems:"center"}},s(e.column.columnDef.header,e.getContext()),r&&o&&t.createElement(l,{css:{position:"relative",alignItems:"center"}},t.createElement(g,{direction:r}))))};export{b as DataTableHeaderCell};
+import{SortUp as s,SortDown as m}from"@atom-learning/icons";import{flexRender as a}from"@tanstack/react-table";import*as t from"react";import{Flex as l}from"../flex/Flex.js";import{Icon as d}from"../icon/Icon.js";import{Table as p}from"../table/Table.js";import{useDataTable as f}from"./DataTableContext.js";const u={asc:s,desc:m},g=({direction:e})=>t.createElement(d,{is:u[e],size:"sm",css:{position:"absolute",left:"$1"}}),b=({header:e,children:C,css:i,...c})=>{const r=e.column.getIsSorted(),{isSortable:o}=f(),n=e.column.getCanSort();return t.createElement(p.HeaderCell,{onClick:o&&n?e.column.getToggleSortingHandler():void 0,css:{cursor:o&&n?"pointer":"initial",...i},...c},t.createElement(l,{css:{alignItems:"center"}},a(e.column.columnDef.header,e.getContext()),r&&o&&t.createElement(l,{css:{position:"relative",alignItems:"center"}},t.createElement(g,{direction:r}))))};export{b as DataTableHeaderCell};

package/dist/components/data-table/drag-and-drop/DragAndDropContainer.d.ts

@@ -1,6 +1,9 @@
-import type { TAsyncDataResult, TableData } from '../DataTable.types';
 import type { UniqueIdentifier } from '@dnd-kit/core';
 import * as React from 'react';
+import type { TableData, TAsyncDataResult } from '../DataTable.types';
+export declare const useDragAndDropTable: () => {
+    idColumn: string;
+};
 declare type DragAndDropContainerProps = {
     idColumn?: string;
     onChange?: (oldIndex: number, newIndex: number, newData: TableData) => void;

package/dist/components/data-table/drag-and-drop/DragAndDropContainer.js

@@ -0,0 +1 @@
+import{useSensors as g,useSensor as u,PointerSensor as h,KeyboardSensor as C,DndContext as f,closestCenter as b}from"@dnd-kit/core";import{restrictToVerticalAxis as w}from"@dnd-kit/modifiers";import{sortableKeyboardCoordinates as y,SortableContext as x,verticalListSortingStrategy as E,arrayMove as S}from"@dnd-kit/sortable";import*as a from"react";import{useDataTable as T}from"../DataTableContext.js";const p=a.createContext({idColumn:"id"}),A=()=>{const e=a.useContext(p);if(!e)throw new Error("useDragAndDropTable can only be called within a DragAndDropContainer");return e},m=(e,i,o,t,s)=>{const{active:d,over:l}=e,c=o.indexOf(d.id),n=o.indexOf(l==null?void 0:l.id),r=S(i.results,c,n);return s==null||s(c,n,r),{results:r,total:r.length}},D=(e,i)=>e.results.map(o=>{const t=o[i];if(t===void 0)throw new Error("To ensure drag-and-drop works correctly, please ensure that each row has a unique ID. Use the `id` property or pass DataTable an `idColumn` prop that defines the ID property on the rows.");return t}),O=({idColumn:e="id",onChange:i=void 0,children:o})=>{const{data:t,setData:s}=T(),d=a.useMemo(()=>D(t,e),[t]),l=g(u(h),u(C,{coordinateGetter:y}));return a.createElement(f,{sensors:l,collisionDetection:b,onDragEnd:c=>{const{active:n,over:r}=c;n.id&&(r==null?void 0:r.id)&&n.id!==(r==null?void 0:r.id)&&s(v=>m({active:n,over:r},v,d,e,i))},modifiers:[w]},a.createElement(x,{items:d,strategy:E},a.createElement(p.Provider,{value:{idColumn:e}},o)))};export{O as DragAndDropContainer,D as getRowOrder,m as processDragEndEvent,A as useDragAndDropTable};

package/dist/components/data-table/drag-and-drop/DraggableRow.js

@@ -0,0 +1 @@
+import{useSortable as f}from"@dnd-kit/sortable";import{CSS as d}from"@dnd-kit/utilities";import{flexRender as g}from"@tanstack/react-table";import*as e from"react";import{Table as l}from"../../table/Table.js";import{DataTableDataCell as c}from"../DataTableDataCell.js";import{useDragAndDropTable as b}from"./DragAndDropContainer.js";import{Handle as D}from"./Handle.js";import"../DataTable.js";import"../DataTable.types.js";import"../DataTableContext.js";import"../DataTableLoading.js";const u=({row:o})=>{const{idColumn:i}=b(),{attributes:m,listeners:a,transform:n,setNodeRef:s,isDragging:t}=f({id:o.original[i]});return e.createElement(l.Row,{ref:s,css:{transform:d.Transform.toString(n),zIndex:t?5:void 0}},o.getVisibleCells().map((r,p)=>p===0?e.createElement(l.Cell,{key:r.id},e.createElement(D,{...m,...a,isDragging:t,css:{display:"inline-block"},label:"drag and drop"}),g(r.column.columnDef.cell,r.getContext())):e.createElement(c,{key:r.id,cell:r})))};export{u as DraggableRow};

package/dist/components/data-table/drag-and-drop/Handle.d.ts

@@ -1,5 +1,5 @@
-import { Icon } from '../../icon';
 import * as React from 'react';
+import { Icon } from '../../icon';
 export declare const StyledHandle: import("@stitches/react/types/styled-component").StyledComponent<React.ForwardRefExoticComponent<Pick<Omit<Omit<Pick<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "key" | keyof React.ButtonHTMLAttributes<HTMLButtonElement>> & {
     ref?: ((instance: HTMLButtonElement | null) => void) | React.RefObject<HTMLButtonElement> | null | undefined;
 }, "appearance" | "size" | "css" | "theme" | "isRounded"> & import("@stitches/react/types/styled-component").TransformProps<{

package/dist/components/data-table/drag-and-drop/Handle.js

@@ -0,0 +1 @@
+import{DragHandle as n}from"@atom-learning/icons";import*as r from"react";import{styled as s}from"../../../stitches.js";import{ActionIcon as m}from"../../action-icon/ActionIcon.js";import{Icon as g}from"../../icon/Icon.js";const i=s(m,{color:"inherit !important",fill:"currentColor",variants:{isDragging:{true:{cursor:"grabbing"},false:{cursor:"grab"}}}}),l=r.forwardRef(({isDragging:o,size:e,...a},t)=>r.createElement(i,{ref:t,isDragging:o,appearance:"simple",size:e,...a},r.createElement(g,{is:n,size:e})));export{l as Handle,i as StyledHandle};

package/dist/components/data-table/drag-and-drop/index.d.ts

@@ -1,4 +1,4 @@
-export { DragAndDropContainer } from './DragAndDropContainer';
+export { useDragAndDropTable, DragAndDropContainer } from './DragAndDropContainer';
 export { DraggableRow } from './DraggableRow';
 export { Handle } from './Handle';
 export { DragAndDropTable } from './DragAndDropTable';

package/dist/components/data-table/usePagination.d.ts

@@ -1,5 +1,5 @@
-import React from 'react';
 import type { PaginationState } from '@tanstack/react-table';
+import React from 'react';
 export declare const usePagination: (initialPaginationState: PaginationState | undefined) => {
     isPaginated: boolean;
     paginationState: PaginationState | undefined;

package/dist/components/data-table/useSorting.d.ts

@@ -1,5 +1,5 @@
-import React from 'react';
 import type { SortingState } from '@tanstack/react-table';
+import React from 'react';
 import { TDefaultSort } from './DataTable.types';
 export declare const useSortByColumn: (defaultSort: TDefaultSort | undefined) => {
     isSortable: boolean;

package/dist/components/date-input/DateInput.js

@@ -0,0 +1 @@
+import{CalendarEvent as T}from"@atom-learning/icons";import*as e from"react";import{DIALOG_Z_INDEX as x}from"../../constants/zIndices.js";import{ActionIcon as z}from"../action-icon/ActionIcon.js";import{Box as F}from"../box/Box.js";import{Calendar as L}from"../calendar/Calendar.js";import{DEFAULT_LABELS as S}from"../calendar/constants.js";import{Icon as _}from"../icon/Icon.js";import{Input as k}from"../input/Input.js";import{Popover as r}from"../popover/Popover.js";import{DEFAULT_DATE_FORMAT as R}from"./constants.js";import{useDate as B}from"./use-date.js";const D=e.forwardRef(({initialDate:E,dateFormat:g=R,firstDayOfWeek:h=1,disabled:s,monthNames:b,weekdayNames:v,size:l="md",labels:y,revalidate:o,onChange:n,minDate:A,maxDate:C,...I},w)=>{const{date:a,dateString:O,setDate:m}=B(E,g),i={...S,...y},[N,d]=e.useState(!1),f=e.useRef(null),c=e.useRef(null);return e.useEffect(()=>{n==null||n(a)},[a,n]),e.createElement(F,{css:{position:"relative"}},e.createElement(k,{name:"date",disabled:s,size:l,...I,onChange:t=>m(t.target.value,!0),value:O,ref:w}),e.createElement(r,{modal:!0,open:N,onOpenChange:d},e.createElement(r.Trigger,{asChild:!0},e.createElement(z,{css:{position:"absolute",top:"0",right:"0"},disabled:s,label:i.open,size:l,theme:"neutral"},e.createElement(_,{is:T}))),e.createElement(r.Portal,null,e.createElement(r.Content,{css:{pr:"$sizes$2",zIndex:x},side:"bottom",align:"end",showCloseButton:!1,onOpenAutoFocus:t=>{var p,u;t.preventDefault(),a?(p=c.current)==null||p.focus():(u=f.current)==null||u.focus()}},e.createElement(L,{date:a||new Date,selected:a,onDateSelected:async t=>{d(!1),await m(t.date,!1),o&&o()},setYear:async t=>{await m(t,!1),o&&o()},minDate:A,maxDate:C,refDateToday:f,refDateSelected:c,firstDayOfWeek:h,monthNames:b,weekdayNames:v,labels:i})))))});D.displayName="DateInput";export{D as DateInput};

package/dist/{lib/src/components → components}/dismissible/DismissibleRoot.js

@@ -1 +1 @@
-import*as e from"react";import{Slot as c}from"@radix-ui/react-slot";const r=e.createContext({isDismissed:!1,setIsDismissed:()=>null}),n=({children:i,disabled:s})=>{const[t,o]=e.useState(!1),l=e.useMemo(()=>({disabled:s,isDismissed:t,setIsDismissed:o}),[s,t]);return e.createElement(r.Provider,{value:l},i)},u=({asChild:i=!1,value:s,onDismiss:t,...o})=>{const l=e.useContext(r),{isDismissed:d,disabled:a}=l;if(e.useEffect(()=>{d&&(t==null||t(s))},[d]),d)return null;const m={...a&&{["data-disabled"]:""},...o};return e.createElement(i?c:"div",{...m})},b=({disabled:i=!1,...s})=>e.createElement(n,{disabled:i},e.createElement(u,{...s}));export{b as DismissibleRoot,r as DismissibleRootContext,n as DismissibleRootProvider};
+import{Slot as c}from"@radix-ui/react-slot";import*as e from"react";const r=e.createContext({isDismissed:!1,setIsDismissed:()=>null}),n=({children:i,disabled:s})=>{const[t,o]=e.useState(!1),l=e.useMemo(()=>({disabled:s,isDismissed:t,setIsDismissed:o}),[s,t]);return e.createElement(r.Provider,{value:l},i)},u=({asChild:i=!1,value:s,onDismiss:t,...o})=>{const l=e.useContext(r),{isDismissed:d,disabled:a}=l;if(e.useEffect(()=>{d&&(t==null||t(s))},[d]),d)return null;const m={...a&&{["data-disabled"]:""},...o};return e.createElement(i?c:"div",{...m})},b=({disabled:i=!1,...s})=>e.createElement(n,{disabled:i},e.createElement(u,{...s}));export{b as DismissibleRoot,r as DismissibleRootContext,n as DismissibleRootProvider};

package/dist/{lib/src/components → components}/dismissible/DismissibleTrigger.js

@@ -1 +1 @@
-import*as e from"react";import{Slot as m}from"@radix-ui/react-slot";import{DismissibleRootContext as l}from"./DismissibleRoot.js";const b=s=>e.createElement("button",{type:"button",...s},"Dismiss"),a=({asChild:s=!1,...t})=>{const i=e.useContext(l);if(i===void 0)throw new Error("Dismissible.Trigger can only be used within a Dismissible.Item");const{setIsDismissed:o,disabled:r}=i,n={disabled:r,onClick:()=>{o(!0)},...t};return e.createElement(s?m:b,{...n})};export{a as DismissibleTrigger};
+import{Slot as m}from"@radix-ui/react-slot";import*as e from"react";import{DismissibleRootContext as l}from"./DismissibleRoot.js";const b=s=>e.createElement("button",{type:"button",...s},"Dismiss"),a=({asChild:s=!1,...t})=>{const i=e.useContext(l);if(i===void 0)throw new Error("Dismissible.Trigger can only be used within a Dismissible.Item");const{setIsDismissed:o,disabled:r}=i,n={disabled:r,onClick:()=>{o(!0)},...t};return e.createElement(s?m:b,{...n})};export{a as DismissibleTrigger};

package/dist/components/dismissible-group/DismissibleGroupItem.js

@@ -0,0 +1 @@
+import*as i from"react";import{Dismissible as n}from"../dismissible/index.js";import{DismissibleGroupContext as l}from"./DismissibleGroupRoot.js";const b=({children:e,disabled:o=!1,...r})=>{const s=i.useContext(l);if(s===void 0)throw new Error("DismissibleGroup.Item can only be used within a DismissibleGroup");const{onDismiss:t,disabled:m}=s;return i.createElement(n,{disabled:m||o,onDismiss:t,...r},e)};export{b as DismissibleGroupItem};

package/dist/components/dismissible-group/index.d.ts

@@ -1,6 +1,6 @@
+import { DismissibleTrigger } from '../../components/dismissible/DismissibleTrigger';
 import { DismissibleGroupItem } from './DismissibleGroupItem';
 import { DismissibleGroupRoot } from './DismissibleGroupRoot';
-import { DismissibleTrigger } from '../../components/dismissible/DismissibleTrigger';
 declare type TDismissibleGroup = typeof DismissibleGroupRoot & {
     Item: typeof DismissibleGroupItem;
     Trigger: typeof DismissibleTrigger;

package/dist/components/dismissible-group/index.js

@@ -0,0 +1 @@
+import{DismissibleTrigger as s}from"../dismissible/DismissibleTrigger.js";import{DismissibleGroupItem as r}from"./DismissibleGroupItem.js";import{DismissibleGroupRoot as m}from"./DismissibleGroupRoot.js";const i=m;i.Item=r,i.Trigger=s,i.displayName="DismissibleGroup";export{i as DismissibleGroup};

package/dist/components/field-wrapper/FieldWrapper.js

@@ -0,0 +1 @@
+import*as f from"@radix-ui/react-visually-hidden";import*as e from"react";import{Box as d}from"../box/Box.js";import{Flex as b}from"../flex/Flex.js";import{InlineMessage as E}from"../inline-message/InlineMessage.js";import{Label as h}from"../label/Label.js";import{Link as u}from"../link/Link.js";import{Description as F}from"./FieldDescription.js";const o=({css:i,children:s,error:t,fieldId:l,label:n,prompt:r,description:m,required:a,hideLabel:p})=>{const c=p?f.Root:b;return e.createElement(d,{css:i},e.createElement(c,{css:{justifyContent:"space-between",alignItems:"center",mb:"$3"}},e.createElement(h,{htmlFor:l,required:a},n),r&&e.createElement(u,{href:r.link,size:"sm"},r.label)),m&&e.createElement(F,{css:{mb:"$3"}},m),s,t&&e.createElement(E,{css:{mt:"$2"}},t))};o.displayName="FieldWrapper";export{o as FieldWrapper};

package/dist/{lib/src/components → components}/field-wrapper/InlineFieldWrapper.js

@@ -1 +1 @@
-import*as e from"react";import{Box as m}from"../box/Box.js";import{Checkbox as d}from"../checkbox/Checkbox.js";import{Label as f}from"../label/Label.js";import{RadioButton as $}from"../radio-button/RadioButton.js";import"../radio-button/RadioButtonGroup.js";import{InlineMessage as u}from"../inline-message/InlineMessage.js";import{Description as E}from"./FieldDescription.js";const l=({align:n="start",children:a,css:s,description:i,direction:t="row",error:o,label:p,required:c})=>e.createElement(m,{css:s},e.createElement(f,{align:n,direction:t,required:c,type:"inline"},e.Children.map(a,r=>e.createElement(m,{css:{[t==="reverse"?"ml":"mr"]:"$3",...((r==null?void 0:r.type)===d||(r==null?void 0:r.type)===$)&&{transform:"translateY($space$1)"}}},r)),p),o&&e.createElement(u,{css:{mt:"$2"}},o),i&&e.createElement(E,{css:{mt:"$2",[t==="reverse"?"mr":"ml"]:"calc($space$3 + $sizes$1)"}},i));l.displayName="InlineFieldWrapper";export{l as InlineFieldWrapper};
+import*as e from"react";import{Box as m}from"../box/Box.js";import{Checkbox as d}from"../checkbox/Checkbox.js";import{InlineMessage as f}from"../inline-message/InlineMessage.js";import{Label as $}from"../label/Label.js";import{RadioButton as u}from"../radio-button/RadioButton.js";import"../radio-button/RadioButtonGroup.js";import{Description as E}from"./FieldDescription.js";const l=({align:n="start",children:a,css:s,description:i,direction:t="row",error:o,label:p,required:c})=>e.createElement(m,{css:s},e.createElement($,{align:n,direction:t,required:c,type:"inline"},e.Children.map(a,r=>e.createElement(m,{css:{[t==="reverse"?"ml":"mr"]:"$3",...((r==null?void 0:r.type)===d||(r==null?void 0:r.type)===u)&&{transform:"translateY($space$1)"}}},r)),p),o&&e.createElement(f,{css:{mt:"$2"}},o),i&&e.createElement(E,{css:{mt:"$2",[t==="reverse"?"mr":"ml"]:"calc($space$3 + $sizes$1)"}},i));l.displayName="InlineFieldWrapper";export{l as InlineFieldWrapper};

package/dist/components/inline-message/InlineMessage.config.d.ts

@@ -1,5 +1,5 @@
-import * as React from "react";
-import { InlineMessageTheme } from "./InlineMessage.types";
+import * as React from 'react';
 import type { CSS } from '../../stitches';
+import { InlineMessageTheme } from './InlineMessage.types';
 export declare const INLINE_MESSAGE_THEMES: Record<InlineMessageTheme, CSS>;
 export declare const INLINE_MESSAGE_ICONS: Record<InlineMessageTheme, React.FC<React.SVGProps<SVGSVGElement>>>;

package/dist/components/inline-message/InlineMessage.js

@@ -0,0 +1 @@
+import*as e from"react";import{Flex as a}from"../flex/Flex.js";import{Icon as c}from"../icon/Icon.js";import{Text as E}from"../text/Text.js";import{styled as s}from"../../stitches.js";import{INLINE_MESSAGE_THEMES as f,INLINE_MESSAGE_ICONS as l}from"./InlineMessage.config.js";const p=s(a,{variants:{theme:f}}),I=s(c,{flexShrink:"0",mr:"$2"}),S=({css:t,showIcon:m=!0,theme:r="error",size:o="sm",children:n,...i})=>e.createElement(p,{theme:r,css:t,...i},m&&e.createElement(I,{size:"sm",is:l[r]}),e.createElement(E,{as:"span",size:o,css:{transform:"translateY($space$0)"}},n));export{S as InlineMessage};

package/dist/components/list/List.d.ts

@@ -267,6 +267,7 @@ export declare const StyledLi: import("@stitches/react/types/styled-component").
 }>>;
 export declare const StyledList: import("@stitches/react/types/styled-component").StyledComponent<"ul", {
     as?: "ol" | "ul" | undefined;
+    theme?: "primary" | undefined;
     size?: "sm" | "md" | "lg" | "xl" | "xs" | undefined;
     noCapsize?: boolean | "true" | undefined;
 }, {

package/dist/components/list/List.js

@@ -0,0 +1 @@
+import*as e from"react";import{styled as o}from"../../stitches.js";import{textVariants as d}from"../text/Text.js";const t=o("li",{}),r=o("ul",{fontFamily:"$body",m:"unset",p:"unset",[`& > ${t}`]:{"&:not(:last-child)":{mb:"$2"},"&:last-child":{mb:0}},variants:{...d,as:{ol:{pl:"$4",listStyle:"decimal",[`& > ${t}`]:{pl:"$1","&::marker":{fontSize:"$sm",fontWeight:"bold"}}},ul:{pl:"$3",[`& > ${t}`]:{pl:"$2","&::marker":{content:"\u2022",fontWeight:"bold"}}}},theme:{primary:{[`& > ${t}`]:{"&::marker":{color:"$primary"}}}}}}),l=e.forwardRef(({size:i="md",noCapsize:m=!0,ordered:a,...s},n)=>e.createElement(r,{ref:n,as:a?"ol":"ul",size:i,noCapsize:m,...s}));l.Item=t;export{l as List,t as StyledLi,r as StyledList};

package/dist/components/navigation/NavigationMenuDropdownContent.js

@@ -0,0 +1 @@
+import*as i from"@radix-ui/react-navigation-menu";import o from"react";import{preventHover as e}from"./preventHover.js";import{styled as t}from"../../stitches.js";const a=t("ul",{listStyle:"none",m:0,p:0}),m=t(i.Content,{p:"$3",bg:"white",mt:"4px",boxShadow:"$1",borderRadius:"$1"}),n=({children:r})=>o.createElement(m,{onPointerMove:e,onPointerLeave:e},o.createElement(a,null,r));n.displayName="NavigationMenuDropdownContent";export{n as NavigationMenuDropdownContent};

package/dist/components/navigation/NavigationMenuDropdownTrigger.js

@@ -0,0 +1 @@
+import{ChevronDown as s}from"@atom-learning/icons";import*as m from"@radix-ui/react-navigation-menu";import e from"react";import{preventHover as t}from"./preventHover.js";import{styled as f}from"../../stitches.js";import{Icon as p}from"../icon/Icon.js";import{navigationMenuBaseItemStyles as d,navigationMenuActiveItemStyles as c}from"./NavigationMenu.styles.js";const v=f(m.Trigger,d,{display:"flex",alignItems:"center",borderRadius:"$1",justifyContent:"space-between",'&[data-state="open"]':{background:"$tonal100"},variants:{active:{true:{...c}}}}),r=e.forwardRef(({children:o,active:n,...a},i)=>e.createElement(v,{active:n,...a,ref:i,onPointerMove:t,onPointerLeave:t},o,e.createElement(p,{is:s,css:{ml:"$1","[data-state=open] &":{transform:"rotate(-180deg)"},"@media (prefers-reduced-motion: no-preference)":{transition:"transform .2s ease"}},size:"sm"})));r.displayName="NavigationMenuDropdownTrigger";export{r as NavigationMenuDropdownTrigger};

package/dist/components/navigation/preventHover.d.ts

@@ -0,0 +1 @@
+export declare const preventHover: (event: any) => void;

package/dist/components/navigation/preventHover.js

@@ -0,0 +1 @@
+const t=e=>{e.preventDefault()};export{t as preventHover};

package/dist/components/number-input/NumberInputStepper.js

@@ -0,0 +1 @@
+import{styled as t}from"../../stitches.js";import*as e from"react";import{ActionIcon as m}from"../action-icon/ActionIcon.js";import{Icon as p}from"../icon/Icon.js";import{Tooltip as o}from"../tooltip/Tooltip.js";const s=t("span",{zIndex:1}),d=t(m,{borderColor:"$tonal400 !important",zIndex:1,"&:hover":{bg:"$tonal50",svg:{color:"$tonal400"}},svg:{color:"$tonal300"},"&:active":{bg:"$tonal100",svg:{color:"$tonal500"}},"&:disabled":{opacity:.3,pointerEvents:"none"}}),b=e.forwardRef((n,r)=>{const{icon:l,disabledTooltipContent:a,showTooltip:i,...c}=n;return e.createElement(o,null,e.createElement(o.Trigger,{asChild:!0},e.createElement(s,{tabIndex:-1},e.createElement(d,{tabIndex:-1,appearance:"outline",ref:r,...c},e.createElement(p,{is:l})))),i&&e.createElement(o.Content,null,a))});export{b as NumberInputStepper};

package/dist/{lib/src/components → components}/radio-button-field/RadioButtonField.js

@@ -1 +1 @@
-import*as e from"react";import{useFormContext as F,Controller as g}from"react-hook-form";import{Description as C}from"../field-wrapper/FieldDescription.js";import"../form/Form.js";import{useFieldError as V}from"../form/useFieldError.js";import{Label as b}from"../label/Label.js";import"../radio-button/RadioButton.js";import{RadioButtonGroup as h}from"../radio-button/RadioButtonGroup.js";import{InlineMessage as v}from"../inline-message/InlineMessage.js";import{styled as B}from"../../stitches.js";import{RadioField as R}from"./RadioField.js";const $=B("fieldset",{all:"unset"}),r=({children:s,css:d,direction:u="column",defaultValue:t,description:l,label:c,name:n,validation:o,onValueChange:a})=>{const{control:p}=F(),{error:m}=V(n);return e.createElement($,{css:d},e.createElement(b,{as:"legend",css:{p:0,mb:"$3"},required:Boolean(o==null?void 0:o.required)},c),l&&e.createElement(C,{css:{mb:"$3"}},l),e.createElement(g,{control:p,name:n,rules:o,defaultValue:t,render:({onChange:f,value:E})=>e.createElement(h,{direction:u,defaultValue:t,onValueChange:i=>{f(i),a==null||a(i)},value:E},s)}),m&&e.createElement(v,{css:{mt:"$2"}},m))};r.Item=R,r.displayName="RadioButtonField";export{r as RadioButtonField};
+import*as e from"react";import{useFormContext as F,Controller as g}from"react-hook-form";import{Description as C}from"../field-wrapper/FieldDescription.js";import"../form/Form.js";import{useFieldError as V}from"../form/useFieldError.js";import{InlineMessage as b}from"../inline-message/InlineMessage.js";import{Label as h}from"../label/Label.js";import"../radio-button/RadioButton.js";import{RadioButtonGroup as v}from"../radio-button/RadioButtonGroup.js";import{styled as B}from"../../stitches.js";import{RadioField as R}from"./RadioField.js";const $=B("fieldset",{all:"unset"}),r=({children:s,css:d,direction:u="column",defaultValue:t,description:l,label:c,name:n,validation:o,onValueChange:a})=>{const{control:p}=F(),{error:m}=V(n);return e.createElement($,{css:d},e.createElement(h,{as:"legend",css:{p:0,mb:"$3"},required:Boolean(o==null?void 0:o.required)},c),l&&e.createElement(C,{css:{mb:"$3"}},l),e.createElement(g,{control:p,name:n,rules:o,defaultValue:t,render:({onChange:f,value:E})=>e.createElement(v,{direction:u,defaultValue:t,onValueChange:i=>{f(i),a==null||a(i)},value:E},s)}),m&&e.createElement(b,{css:{mt:"$2"}},m))};r.Item=R,r.displayName="RadioButtonField";export{r as RadioButtonField};

package/dist/components/radio-card/RadioCardGroup.d.ts

@@ -1,9 +1,9 @@
 import * as RadioGroup from '@radix-ui/react-radio-group';
-import type * as Stitches from '@stitches/react';
+import type { VariantProps } from '@stitches/react';
 import * as React from 'react';
 import type { Override } from '../../utilities';
 import { Stack } from '../stack/Stack';
 import { StyledRadioCard } from './RadioCard';
-declare type RadioCardGroupProps = Override<Pick<React.ComponentProps<typeof Stack>, 'justify' | 'gap' | 'css'> & Stitches.VariantProps<typeof StyledRadioCard>, React.ComponentProps<typeof RadioGroup.Root>>;
+declare type RadioCardGroupProps = Override<Pick<React.ComponentProps<typeof Stack>, 'justify' | 'gap' | 'css'> & VariantProps<typeof StyledRadioCard>, React.ComponentProps<typeof RadioGroup.Root>>;
 export declare const RadioCardGroup: React.FC<RadioCardGroupProps>;
 export {};

package/dist/{lib/src/components → components}/sidedrawer/SidedrawerAccordion/SidedrawerAccordionContent.js

@@ -1 +1 @@
-import t from"react";import{Content as i}from"@radix-ui/react-accordion";import{Box as n}from"../../box/Box.js";import{keyframes as o,styled as m}from"../../../stitches.js";const c=o({from:{height:0},to:{height:"var(--radix-accordion-content-height)"}}),d=o({from:{height:"var(--radix-accordion-content-height)"},to:{height:0}}),h=m(i,{bg:"white",overflow:"hidden","@allowMotion":{'&[data-state="open"]':{animation:`${c} 300ms ease-out`},'&[data-state="closed"]':{animation:`${d} 300ms ease-out`}}}),s=({children:e,...a})=>t.createElement(h,{...a},t.Children.map(e,r=>t.createElement(n,{css:{"> a":{px:"$6"},"> button":{px:"$6"}}},r)));export{s as SidedrawerAccordionContent};
+import{Content as i}from"@radix-ui/react-accordion";import t from"react";import{keyframes as o,styled as n}from"../../../stitches.js";import{Box as m}from"../../box/Box.js";const c=o({from:{height:0},to:{height:"var(--radix-accordion-content-height)"}}),d=o({from:{height:"var(--radix-accordion-content-height)"},to:{height:0}}),h=n(i,{bg:"white",overflow:"hidden","@allowMotion":{'&[data-state="open"]':{animation:`${c} 300ms ease-out`},'&[data-state="closed"]':{animation:`${d} 300ms ease-out`}}}),s=({children:e,...a})=>t.createElement(h,{...a},t.Children.map(e,r=>t.createElement(m,{css:{"> a":{px:"$6"},"> button":{px:"$6"}}},r)));export{s as SidedrawerAccordionContent};

package/dist/components/sidedrawer/SidedrawerAccordion/SidedrawerAccordionTrigger.js

@@ -0,0 +1 @@
+import{ChevronDown as m}from"@atom-learning/icons";import{Trigger as n,Header as a}from"@radix-ui/react-accordion";import e from"react";import{styled as t}from"../../../stitches.js";import{Flex as i}from"../../flex/Flex.js";import{Icon as s}from"../../icon/Icon.js";import{sidedrawerItemStyles as c}from"../Sidedrawer.styles.js";const p=t(n,{justifyContent:"space-between",m:0,p:0,"&[data-state=open]":{fontWeight:"600"},...c}),d=t(s,{transition:"transform 300ms",'[data-state="open"] > &':{transform:"rotate(180deg)"}}),f=({children:r,...o})=>e.createElement(a,null,e.createElement(p,{...o},e.createElement(i,{css:{alignItems:"center"}},r),e.createElement(d,{is:m,size:"sm"})));export{f as SidedrawerAccordionTrigger};

package/dist/components/sidedrawer/SidedrawerClose.js

@@ -0,0 +1 @@
+import{Close as l}from"@atom-learning/icons";import{Close as i}from"@radix-ui/react-dialog";import e from"react";import{ActionIcon as s}from"../action-icon/ActionIcon.js";import{Icon as p}from"../icon/Icon.js";const c=({appearance:o="simple",label:r="close",size:t="md",theme:m="neutral",...a})=>e.createElement(i,{asChild:!0},e.createElement(s,{theme:m,appearance:o,size:t,label:r,...a},e.createElement(p,{is:l})));export{c as SidedrawerClose};

package/dist/{lib/src/components → components}/sidedrawer/SidedrawerOverlay.js

@@ -1 +1 @@
-import{MAX_Z_INDEX as o}from"../../constants/zIndices.js";import{Overlay as t}from"@radix-ui/react-dialog";import{styled as a}from"../../stitches.js";import{fadeIn as e,fadeOut as i}from"../../utilities/style/keyframe-animations.js";const r=a(t,{animationFillMode:"forwards",bg:"$alpha600",cursor:"pointer",height:"100vh",left:"0",position:"fixed",top:"0",width:"100vw",zIndex:o-1,"@allowMotion":{'&[data-state="open"]':{animation:`${e} 250ms ease-out`},'&[data-state="closed"]':{animation:`${i} 550ms ease-out`}}});export{r as SidedrawerOverlay};
+import{Overlay as o}from"@radix-ui/react-dialog";import{MAX_Z_INDEX as t}from"../../constants/zIndices.js";import{styled as a}from"../../stitches.js";import{fadeIn as e,fadeOut as i}from"../../utilities/style/keyframe-animations.js";const r=a(o,{animationFillMode:"forwards",bg:"$alpha600",cursor:"pointer",height:"100vh",left:"0",position:"fixed",top:"0",width:"100vw",zIndex:t-1,"@allowMotion":{'&[data-state="open"]':{animation:`${e} 250ms ease-out`},'&[data-state="closed"]':{animation:`${i} 550ms ease-out`}}});export{r as SidedrawerOverlay};