@atom-learning/components 6.5.3 → 6.5.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/badge/Badge.colorscheme.config.js.map +1 -1
- package/dist/components/carousel/CarouselSlider.js +1 -1
- package/dist/components/carousel/CarouselSlider.js.map +1 -1
- package/dist/components/checkbox/Checkbox.js.map +1 -1
- package/dist/components/data-table/DataTableGlobalFilter.js.map +1 -1
- package/dist/components/data-table/DataTableRowSelectionCheckbox.js.map +1 -1
- package/dist/components/data-table/DataTableSelectAllRowsCheckbox.js.map +1 -1
- package/dist/components/field-wrapper/FieldWrapper.js.map +1 -1
- package/dist/components/loader/Loader.js.map +1 -1
- package/dist/components/number-input/NumberInputStepper.js.map +1 -1
- package/dist/components/slider/SliderSteps.js +1 -1
- package/dist/components/slider/SliderSteps.js.map +1 -1
- package/dist/components/tree/TreeIcon.js +1 -1
- package/dist/components/tree/TreeIcon.js.map +1 -1
- package/dist/components/tree/TreeListItem.js +1 -1
- package/dist/components/tree/TreeListItem.js.map +1 -1
- package/dist/index.cjs.js +1 -1
- package/dist/index.cjs.js.map +1 -1
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Badge.colorscheme.config.js","names":[],"sources":["../../../src/components/badge/Badge.colorscheme.config.ts"],"sourcesContent":["/*\n\t•\tFactory for non-semantic color schemes\n*/\nconst createScheme = (
|
|
1
|
+
{"version":3,"file":"Badge.colorscheme.config.js","names":[],"sources":["../../../src/components/badge/Badge.colorscheme.config.ts"],"sourcesContent":["/*\n\t•\tFactory for non-semantic color schemes\n*/\nconst createScheme = (c: string, overrides: Record<string, string> = {}) => ({\n '--text-subtle': `var(--color-${c}-1000)`,\n '--background-subtle': `var(--color-${c}-200)`,\n '--text-subtle-hover': `var(--color-${c}-1100)`,\n '--background-subtle-hover': `var(--color-${c}-300)`,\n '--text-bold': 'white',\n '--background-bold': `var(--color-${c}-800)`,\n '--background-bold-hover': `var(--color-${c}-900)`,\n '--text-on-white': `var(--color-${c}-800)`,\n ...overrides\n})\n\n/*\n\t•\tSemantic themes\n*/\nconst info = {\n '--text-subtle': 'var(--color-info-mid)',\n '--background-subtle': 'var(--color-info-light)',\n '--text-bold': 'white',\n '--background-bold': 'var(--color-info)',\n '--text-on-white': 'var(--color-info)'\n}\nconst neutral = {\n '--text-subtle': 'var(--color-grey-900)',\n '--background-subtle': 'var(--color-grey-100)',\n '--text-bold': 'white',\n '--background-bold': 'var(--color-grey-800)',\n '--text-on-white': 'var(--color-grey-800)'\n}\nconst success = {\n '--text-subtle': 'var(--color-success-mid)',\n '--background-subtle': 'var(--color-success-light)',\n '--text-bold': 'white',\n '--background-bold': 'var(--color-success)',\n '--text-on-white': 'var(--color-success)'\n}\nconst danger = {\n '--text-subtle': 'var(--color-danger-mid)',\n '--background-subtle': 'var(--color-danger-light)',\n '--text-bold': 'white',\n '--background-bold': 'var(--color-danger)',\n '--text-on-white': 'var(--color-danger)'\n}\nconst warning = {\n '--text-subtle': 'var(--color-warning-text)',\n '--background-subtle': 'var(--color-warning-light)',\n '--text-bold': 'var(--color-grey-1000)',\n '--background-bold': 'var(--color-warning)',\n '--text-on-white': 'var(--color-warning)'\n}\n\n/*\n\t•\tNon-semantic themes\n*/\nexport const badgeSemanticNames = [\n 'info',\n 'neutral',\n 'success',\n 'danger',\n 'warning'\n]\nexport const colorSchemes = {\n info,\n neutral,\n success,\n danger,\n warning,\n primary: createScheme('primary'),\n grey: createScheme('grey'),\n blue: createScheme('blue'),\n pink: createScheme('pink'),\n purple: createScheme('purple', {\n '--text-on-white': 'var(--color-purple-700)'\n }),\n cyan: createScheme('cyan'),\n green: createScheme('green'),\n magenta: createScheme('magenta'),\n red: createScheme('red', {\n '--background-subtle-hover': 'var(--color-red-400)'\n }),\n teal: createScheme('teal'),\n orange: createScheme('orange', {\n '--text-bold': 'var(--color-grey-1200)',\n '--background-bold': 'var(--color-orange-600)',\n '--background-bold-hover': 'var(--color-orange-700)',\n '--text-on-white': 'var(--color-orange-1000)'\n }),\n yellow: createScheme('yellow', {\n '--text-bold': 'var(--color-grey-1200)',\n '--background-bold': 'var(--color-yellow-500)',\n '--background-bold-hover': 'var(--color-yellow-600)',\n '--text-on-white': 'var(--color-yellow-900)'\n }),\n lime: createScheme('lime', {\n '--text-bold': 'var(--color-grey-1200)',\n '--background-bold': 'var(--color-lime-600)',\n '--background-bold-hover': 'var(--color-lime-700)',\n '--text-on-white': 'var(--color-lime-900)'\n }),\n lapis: createScheme('lapis', {\n '--background-bold': 'var(--color-lapis-700)',\n '--text-on-white': 'var(--color-lapis-700)'\n }),\n maroon: createScheme('maroon', {\n '--text-on-white': 'var(--color-maroon-700)'\n }),\n marsh: createScheme('marsh', { '--text-on-white': 'var(--color-marsh-700)' })\n}\n"],"mappings":";AAGA,IAAM,KAAgB,GAAW,IAAoC,EAAE,MAAM;CAC3E,iBAAiB,eAAe,EAAE;CAClC,uBAAuB,eAAe,EAAE;CACxC,uBAAuB,eAAe,EAAE;CACxC,6BAA6B,eAAe,EAAE;CAC9C,eAAe;CACf,qBAAqB,eAAe,EAAE;CACtC,2BAA2B,eAAe,EAAE;CAC5C,mBAAmB,eAAe,EAAE;CACpC,GAAG;CACJ,GAKK,IAAO;CACX,iBAAiB;CACjB,uBAAuB;CACvB,eAAe;CACf,qBAAqB;CACrB,mBAAmB;CACpB,EACK,IAAU;CACd,iBAAiB;CACjB,uBAAuB;CACvB,eAAe;CACf,qBAAqB;CACrB,mBAAmB;CACpB,EACK,IAAU;CACd,iBAAiB;CACjB,uBAAuB;CACvB,eAAe;CACf,qBAAqB;CACrB,mBAAmB;CACpB,EACK,IAAS;CACb,iBAAiB;CACjB,uBAAuB;CACvB,eAAe;CACf,qBAAqB;CACrB,mBAAmB;CACpB,EACK,IAAU;CACd,iBAAiB;CACjB,uBAAuB;CACvB,eAAe;CACf,qBAAqB;CACrB,mBAAmB;CACpB,EAKY,IAAqB;CAChC;CACA;CACA;CACA;CACA;CACD,EACY,IAAe;CAC1B;CACA;CACA;CACA;CACA;CACA,SAAS,EAAa,UAAU;CAChC,MAAM,EAAa,OAAO;CAC1B,MAAM,EAAa,OAAO;CAC1B,MAAM,EAAa,OAAO;CAC1B,QAAQ,EAAa,UAAU,EAC7B,mBAAmB,2BACpB,CAAC;CACF,MAAM,EAAa,OAAO;CAC1B,OAAO,EAAa,QAAQ;CAC5B,SAAS,EAAa,UAAU;CAChC,KAAK,EAAa,OAAO,EACvB,6BAA6B,wBAC9B,CAAC;CACF,MAAM,EAAa,OAAO;CAC1B,QAAQ,EAAa,UAAU;EAC7B,eAAe;EACf,qBAAqB;EACrB,2BAA2B;EAC3B,mBAAmB;EACpB,CAAC;CACF,QAAQ,EAAa,UAAU;EAC7B,eAAe;EACf,qBAAqB;EACrB,2BAA2B;EAC3B,mBAAmB;EACpB,CAAC;CACF,MAAM,EAAa,QAAQ;EACzB,eAAe;EACf,qBAAqB;EACrB,2BAA2B;EAC3B,mBAAmB;EACpB,CAAC;CACF,OAAO,EAAa,SAAS;EAC3B,qBAAqB;EACrB,mBAAmB;EACpB,CAAC;CACF,QAAQ,EAAa,UAAU,EAC7B,mBAAmB,2BACpB,CAAC;CACF,OAAO,EAAa,SAAS,EAAE,mBAAmB,0BAA0B,CAAC;CAC9E"}
|
|
@@ -4,7 +4,7 @@ import { Slider as n } from "pure-react-carousel";
|
|
|
4
4
|
//#region src/components/carousel/CarouselSlider.tsx
|
|
5
5
|
var r = ({ children: r, className: i, overflow: a, ...o }) => /* @__PURE__ */ t.createElement(n, {
|
|
6
6
|
...o,
|
|
7
|
-
className: String.raw`ml-[50%] -translate-x-1/2 cursor-grab overflow-hidden **:[[class*=slideInner]]:flex **:[[class*=slideInner]]:justify-center **:[[class*=slide\_]]:float-left **:[[class*=slide\_]]:pb-0! **:[[class*=sliderTray\_]]:transition-transform **:[[class*=sliderTray\_]]:duration-500 **:[[class*=sliderTray\_]]:ease-[cubic-bezier(.645,.045,.355,1)]
|
|
7
|
+
className: e(String.raw`ml-[50%] -translate-x-1/2 cursor-grab overflow-hidden **:[[class*=slideInner]]:flex **:[[class*=slideInner]]:justify-center **:[[class*=slide\_]]:float-left **:[[class*=slide\_]]:pb-0! **:[[class*=sliderTray\_]]:transition-transform **:[[class*=sliderTray\_]]:duration-500 **:[[class*=sliderTray\_]]:ease-[cubic-bezier(.645,.045,.355,1)]`, a && "overflow-visible", i)
|
|
8
8
|
}, r);
|
|
9
9
|
//#endregion
|
|
10
10
|
export { r as CarouselSlider };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CarouselSlider.js","names":[],"sources":["../../../src/components/carousel/CarouselSlider.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport { Slider as BaseSlider } from 'pure-react-carousel'\nimport * as React from 'react'\n\nexport const CarouselSlider = ({\n children,\n className,\n overflow,\n ...rest\n}: React.PropsWithChildren<\n typeof BaseSlider & {\n tabIndex?: number\n className?: string\n overflow?: boolean\n }\n>) => (\n <BaseSlider\n {...rest}\n className={\n String.raw`ml-[50%] -translate-x-1/2 cursor-grab overflow-hidden **:[[class*=slideInner]]:flex **:[[class*=slideInner]]:justify-center **:[[class*=slide\\_]]:float-left **:[[class*=slide\\_]]:pb-0! **:[[class*=sliderTray\\_]]:transition-transform **:[[class*=sliderTray\\_]]:duration-500 **:[[class*=sliderTray\\_]]:ease-[cubic-bezier(.645,.045,.355,1)]
|
|
1
|
+
{"version":3,"file":"CarouselSlider.js","names":[],"sources":["../../../src/components/carousel/CarouselSlider.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport { Slider as BaseSlider } from 'pure-react-carousel'\nimport * as React from 'react'\n\nexport const CarouselSlider = ({\n children,\n className,\n overflow,\n ...rest\n}: React.PropsWithChildren<\n typeof BaseSlider & {\n tabIndex?: number\n className?: string\n overflow?: boolean\n }\n>) => (\n <BaseSlider\n {...rest}\n className={clsx(\n String.raw`ml-[50%] -translate-x-1/2 cursor-grab overflow-hidden **:[[class*=slideInner]]:flex **:[[class*=slideInner]]:justify-center **:[[class*=slide\\_]]:float-left **:[[class*=slide\\_]]:pb-0! **:[[class*=sliderTray\\_]]:transition-transform **:[[class*=sliderTray\\_]]:duration-500 **:[[class*=sliderTray\\_]]:ease-[cubic-bezier(.645,.045,.355,1)]`,\n overflow && 'overflow-visible',\n className\n )}\n >\n {children}\n </BaseSlider>\n)\n"],"mappings":";;;;AAIA,IAAa,KAAkB,EAC7B,aACA,cACA,aACA,GAAG,QAQH,kBAAA,cAAC,GAAD;CACE,GAAI;CACJ,WAAW,EACT,OAAO,GAAG,qVACV,KAAY,oBACZ,EACD;CAGU,EADV,EACU"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Checkbox.js","names":[],"sources":["../../../src/components/checkbox/Checkbox.tsx"],"sourcesContent":["import { Minus, Ok } from '@atom-learning/icons'\nimport * as RadixCheckbox from '@radix-ui/react-checkbox'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\nimport { overrideStyledVariantValue } from '~/utilities/override-styled-variant-value/overrideStyledVariantValue'\n\nimport { Icon } from '../icon/Icon'\n\
|
|
1
|
+
{"version":3,"file":"Checkbox.js","names":[],"sources":["../../../src/components/checkbox/Checkbox.tsx"],"sourcesContent":["import { Minus, Ok } from '@atom-learning/icons'\nimport * as RadixCheckbox from '@radix-ui/react-checkbox'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\nimport { overrideStyledVariantValue } from '~/utilities/override-styled-variant-value/overrideStyledVariantValue'\n\nimport { Icon } from '../icon/Icon'\n\nconst StyledCheckbox = styled(RadixCheckbox.Root, {\n base: [\n 'appearance-none',\n 'relative',\n 'border',\n 'border-grey-800',\n 'rounded-[3px]',\n 'text-white',\n 'bg-white',\n 'cursor-pointer',\n 'size-4',\n 'flex',\n 'items-center',\n 'justify-center',\n 'transition-all',\n 'duration-50',\n 'ease-out',\n 'shrink-0',\n 'not-disabled:before:-inset-2',\n 'not-disabled:before:-z-1',\n 'not-disabled:before:absolute',\n 'not-disabled:before:bg-primary-300',\n \"not-disabled:before:content-['']\",\n 'not-disabled:before:duration-125',\n 'not-disabled:before:ease-in-out',\n 'not-disabled:before:opacity-0',\n 'not-disabled:before:rounded-[50%]',\n 'not-disabled:before:scale-0',\n 'not-disabled:before:transition-[opacity,scale]',\n 'not-disabled:hover:before:opacity-100',\n 'not-disabled:hover:before:scale-100',\n 'data-[state=checked]:bg-primary-800',\n 'data-[state=checked]:border-primary-800',\n 'data-[state=indeterminate]:bg-primary-800',\n 'data-[state=indeterminate]:border-primary-800',\n 'focus:-outline-offset-1',\n 'focus:outline-2',\n 'focus:outline-primary-800',\n 'focus:outline-solid',\n 'disabled:cursor-not-allowed',\n 'disabled:opacity-30'\n ],\n variants: {\n state: {\n error: ['border-danger']\n },\n size: {\n md: ['size-4'],\n lg: ['mt-px', 'size-6']\n }\n }\n})\n\nconst toIconSize = {\n md: 'sm',\n lg: 'sm'\n}\n\nexport const Checkbox = React.forwardRef<\n HTMLButtonElement,\n React.ComponentProps<typeof StyledCheckbox>\n>(({ size = 'md', checked, ...rest }, ref) => {\n const iconSize = React.useMemo(\n () => overrideStyledVariantValue(size, (s) => toIconSize[s]),\n [size]\n )\n\n return (\n <div className=\"relative z-1\">\n <StyledCheckbox ref={ref} checked={checked} size={size} {...rest}>\n <div className=\"absolute -inset-3 opacity-50\" />\n <RadixCheckbox.Indicator asChild>\n <Icon\n is={checked === 'indeterminate' ? Minus : Ok}\n size={iconSize}\n className=\"stroke-3\"\n />\n </RadixCheckbox.Indicator>\n </StyledCheckbox>\n </div>\n )\n})\n\nCheckbox.displayName = 'Checkbox'\n"],"mappings":";;;;;;;AASA,IAAM,IAAiB,EAAO,EAAc,MAAM;CAChD,MAAM,y6BAwCL;CACD,UAAU;EACR,OAAO,EACL,OAAO,CAAC,gBAAgB,EACzB;EACD,MAAM;GACJ,IAAI,CAAC,SAAS;GACd,IAAI,CAAC,SAAS,SAAS;GACxB;EACF;CACF,CAAC,EAEI,IAAa;CACjB,IAAI;CACJ,IAAI;CACL,EAEY,IAAW,EAAM,YAG3B,EAAE,UAAO,MAAM,YAAS,GAAG,KAAQ,MAAQ;CAC5C,IAAM,IAAW,EAAM,cACf,EAA2B,IAAO,MAAM,EAAW,GAAG,EAC5D,CAAC,EAAK,CACP;AAED,QACE,kBAAA,cAAC,OAAD,EAAK,WAAU,gBAWT,EAVJ,kBAAA,cAAC,GAAD;EAAqB;EAAc;EAAe;EAAM,GAAI;EAS3C,EARf,kBAAA,cAAC,OAAD,EAAK,WAAU,gCAAiC,CAAA,EAChD,kBAAA,cAAC,EAAc,WAAf,EAAyB,SAAA,IAMC,EALxB,kBAAA,cAAC,GAAD;EACE,IAAI,MAAY,kBAAkB,IAAQ;EAC1C,MAAM;EACN,WAAU;EACV,CAAA,CACsB,CACX,CACb;EAER;AAEF,EAAS,cAAc"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DataTableGlobalFilter.js","names":[],"sources":["../../../src/components/data-table/DataTableGlobalFilter.tsx"],"sourcesContent":["import * as React from 'react'\nimport { debounce } from 'throttle-debounce'\n\nimport { Label } from '../label/Label'\nimport { SearchInput } from '../search-input/SearchInput'\nimport { AsyncDataState } from './DataTable.types'\nimport { useDataTable } from './DataTableContext'\
|
|
1
|
+
{"version":3,"file":"DataTableGlobalFilter.js","names":[],"sources":["../../../src/components/data-table/DataTableGlobalFilter.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport * as React from 'react'\nimport { debounce } from 'throttle-debounce'\n\nimport { Label } from '../label/Label'\nimport { SearchInput } from '../search-input/SearchInput'\nimport { AsyncDataState } from './DataTable.types'\nimport { useDataTable } from './DataTableContext'\n\ntype DataTableSearchProps = React.ComponentProps<typeof SearchInput> & {\n label: string\n hideLabel?: boolean\n}\nexport const DataTableGlobalFilter = ({\n onChange,\n label,\n hideLabel = false,\n ...props\n}: DataTableSearchProps) => {\n const {\n setGlobalFilter,\n getState,\n resetPagination,\n getTotalRows,\n asyncDataState\n } = useDataTable()\n const { globalFilter } = getState()\n\n const isPending = asyncDataState === AsyncDataState.PENDING\n const isEmpty = !isPending && getTotalRows() === 0\n\n if (isEmpty) return null\n\n const handleChange = debounce(250, (event) => {\n const {\n target: { value }\n } = event\n\n onChange?.(event)\n resetPagination()\n setGlobalFilter(value)\n })\n\n return (\n <>\n <Label htmlFor={label} className={clsx('mb-3', hideLabel && 'sr-only')}>\n {label}\n </Label>\n <SearchInput\n {...props}\n defaultValue={globalFilter}\n onChange={handleChange}\n name={label}\n />\n </>\n )\n}\n"],"mappings":";;;;;;;;AAaA,IAAa,KAAyB,EACpC,aACA,UACA,eAAY,IACZ,GAAG,QACuB;CAC1B,IAAM,EACJ,oBACA,aACA,oBACA,iBACA,sBACE,GAAc,EACZ,EAAE,oBAAiB,GAAU;AAKnC,KAHkB,MAAmB,EAAe,WACtB,GAAc,KAAK,EAEpC,QAAO;CAEpB,IAAM,IAAe,EAAS,MAAM,MAAU;EAC5C,IAAM,EACJ,QAAQ,EAAE,eACR;AAIJ,EAFA,IAAW,EAAM,EACjB,GAAiB,EACjB,EAAgB,EAAM;GACtB;AAEF,QACE,kBAAA,cAAA,EAAA,UAAA,MACE,kBAAA,cAAC,GAAD;EAAO,SAAS;EAAO,WAAW,EAAK,QAAQ,KAAa,UAAU;EAE9D,EADL,EACK,EACR,kBAAA,cAAC,GAAD;EACE,GAAI;EACJ,cAAc;EACd,UAAU;EACV,MAAM;EACN,CAAA,CACD"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DataTableRowSelectionCheckbox.js","names":[],"sources":["../../../src/components/data-table/DataTableRowSelectionCheckbox.tsx"],"sourcesContent":["import type { Row } from '@tanstack/react-table'\nimport * as React from 'react'\n\nimport { Checkbox } from '../checkbox/Checkbox'\nimport { useDataTable } from './DataTableContext'\n\nexport const DataTableRowSelectionCheckbox = ({\n row,\n checked,\n onCheckedChange,\n label = `Row ${row.id} selection`\n}: {\n row: Row<Record<string, unknown>>\n checked: boolean | 'indeterminate'\n onCheckedChange: (value: boolean) => void\n label?: string\n}): React.ReactElement => {\n const { tableId } = useDataTable()\n\n return (\n <>\n <label htmlFor={`${tableId}_row_${row.id}_selection`} className
|
|
1
|
+
{"version":3,"file":"DataTableRowSelectionCheckbox.js","names":[],"sources":["../../../src/components/data-table/DataTableRowSelectionCheckbox.tsx"],"sourcesContent":["import type { Row } from '@tanstack/react-table'\nimport * as React from 'react'\n\nimport { Checkbox } from '../checkbox/Checkbox'\nimport { useDataTable } from './DataTableContext'\n\nexport const DataTableRowSelectionCheckbox = ({\n row,\n checked,\n onCheckedChange,\n label = `Row ${row.id} selection`\n}: {\n row: Row<Record<string, unknown>>\n checked: boolean | 'indeterminate'\n onCheckedChange: (value: boolean) => void\n label?: string\n}): React.ReactElement => {\n const { tableId } = useDataTable()\n\n return (\n <>\n <label htmlFor={`${tableId}_row_${row.id}_selection`} className=\"sr-only\">\n {label}\n </label>\n <Checkbox\n size=\"lg\"\n style={{ '--depth': row.depth }}\n checked={checked}\n onCheckedChange={onCheckedChange}\n name={`${tableId}_row_${row.id}_selection`}\n disabled={!row.getCanSelect()}\n className=\"mr-3 ml-[calc((var(--depth,0)*2)*4px)]\"\n />\n </>\n )\n}\n"],"mappings":";;;;AAMA,IAAa,KAAiC,EAC5C,QACA,YACA,oBACA,WAAQ,OAAO,EAAI,GAAG,kBAME;CACxB,IAAM,EAAE,eAAY,GAAc;AAElC,QACE,kBAAA,cAAA,EAAA,UAAA,MACE,kBAAA,cAAC,SAAD;EAAO,SAAS,GAAG,EAAQ,OAAO,EAAI,GAAG;EAAa,WAAU;EAExD,EADL,EACK,EACR,kBAAA,cAAC,GAAD;EACE,MAAK;EACL,OAAO,EAAE,WAAW,EAAI,OAAO;EACtB;EACQ;EACjB,MAAM,GAAG,EAAQ,OAAO,EAAI,GAAG;EAC/B,UAAU,CAAC,EAAI,cAAc;EAC7B,WAAU;EACV,CAAA,CACD"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DataTableSelectAllRowsCheckbox.js","names":[],"sources":["../../../src/components/data-table/DataTableSelectAllRowsCheckbox.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Checkbox } from '../checkbox/Checkbox'\nimport { Label } from '../label/Label'\nimport { useDataTable } from './DataTableContext'\n\nexport const DataTableSelectAllRowsCheckbox = ({\n label = 'All rows selection'\n}: {\n label?: string\n}) => {\n const {\n getIsAllPageRowsSelected,\n getIsSomePageRowsSelected,\n toggleAllPageRowsSelected,\n tableId\n } = useDataTable()\n\n const getCheckedState = () => {\n if (getIsSomePageRowsSelected()) return 'indeterminate'\n if (getIsAllPageRowsSelected()) return true\n return false\n }\n\n const updateCheckedState = () => {\n if (getIsSomePageRowsSelected()) {\n return toggleAllPageRowsSelected(false)\n }\n return toggleAllPageRowsSelected(!getIsAllPageRowsSelected())\n }\n\n return (\n <>\n <label htmlFor={`${tableId}_all_rows_selection`} className
|
|
1
|
+
{"version":3,"file":"DataTableSelectAllRowsCheckbox.js","names":[],"sources":["../../../src/components/data-table/DataTableSelectAllRowsCheckbox.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Checkbox } from '../checkbox/Checkbox'\nimport { Label } from '../label/Label'\nimport { useDataTable } from './DataTableContext'\n\nexport const DataTableSelectAllRowsCheckbox = ({\n label = 'All rows selection'\n}: {\n label?: string\n}) => {\n const {\n getIsAllPageRowsSelected,\n getIsSomePageRowsSelected,\n toggleAllPageRowsSelected,\n tableId\n } = useDataTable()\n\n const getCheckedState = () => {\n if (getIsSomePageRowsSelected()) return 'indeterminate'\n if (getIsAllPageRowsSelected()) return true\n return false\n }\n\n const updateCheckedState = () => {\n if (getIsSomePageRowsSelected()) {\n return toggleAllPageRowsSelected(false)\n }\n return toggleAllPageRowsSelected(!getIsAllPageRowsSelected())\n }\n\n return (\n <>\n <label htmlFor={`${tableId}_all_rows_selection`} className=\"sr-only\">\n {label}\n </label>\n <Checkbox\n size=\"lg\"\n checked={getCheckedState()}\n onCheckedChange={updateCheckedState}\n name={`${tableId}_allRowsSelection`}\n />\n </>\n )\n}\n"],"mappings":";;;;AAMA,IAAa,KAAkC,EAC7C,WAAQ,2BAGJ;CACJ,IAAM,EACJ,6BACA,8BACA,8BACA,eACE,GAAc;AAelB,QACE,kBAAA,cAAA,EAAA,UAAA,MACE,kBAAA,cAAC,SAAD;EAAO,SAAS,GAAG,EAAQ;EAAsB,WAAU;EAEnD,EADL,EACK,EACR,kBAAA,cAAC,GAAD;EACE,MAAK;EACL,SAnBA,GAA2B,GAAS,kBACxC,EAAI,GAA0B;EAmB1B,uBAdA,GAA2B,GACtB,EAA0B,GAAM,GAElC,EAA0B,CAAC,GAA0B,CAAC;EAYzD,MAAM,GAAG,EAAQ;EACjB,CAAA,CACD"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FieldWrapper.js","names":[],"sources":["../../../src/components/field-wrapper/FieldWrapper.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { ValidationOptions } from '~/components/form/validation'\nimport { InlineMessage } from '~/components/inline-message/InlineMessage'\nimport { Label } from '~/components/label/Label'\nimport { Link } from '~/components/link/Link'\n\nimport { type LabelProps } from '../label/Label'\nimport { Description } from './FieldDescription'\
|
|
1
|
+
{"version":3,"file":"FieldWrapper.js","names":[],"sources":["../../../src/components/field-wrapper/FieldWrapper.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport * as React from 'react'\n\nimport { ValidationOptions } from '~/components/form/validation'\nimport { InlineMessage } from '~/components/inline-message/InlineMessage'\nimport { Label } from '~/components/label/Label'\nimport { Link } from '~/components/link/Link'\n\nimport { type LabelProps } from '../label/Label'\nimport { Description } from './FieldDescription'\n\nexport type FieldWrapperProps = {\n className?: string\n error?: string\n fieldId: string\n label: string\n prompt?: { link?: string; label: string; onClick?: () => void }\n description?: string\n required?: boolean\n hideLabel?: boolean\n appearance?: LabelProps['appearance']\n}\n\nexport type FieldElementWrapperProps = Omit<FieldWrapperProps, 'fieldId'> & {\n name: string\n validation?: ValidationOptions\n}\n\nexport const FieldWrapper = ({\n children,\n error,\n fieldId,\n label,\n prompt,\n description,\n required,\n hideLabel,\n appearance,\n ...rest\n}: React.PropsWithChildren<FieldWrapperProps>) => (\n <div {...rest}>\n <div\n className={clsx(\n 'mb-3',\n 'flex',\n 'items-center',\n 'justify-between',\n hideLabel && 'sr-only'\n )}\n >\n <Label htmlFor={fieldId} required={required} appearance={appearance}>\n {label}\n </Label>\n {prompt && (\n <Link href={prompt?.link} onClick={prompt?.onClick} size=\"sm\">\n {prompt.label}\n </Link>\n )}\n </div>\n {description && <Description className=\"mb-3\">{description}</Description>}\n {children}\n {error && <InlineMessage className=\"mt-2\">{error}</InlineMessage>}\n </div>\n)\n\nFieldWrapper.displayName = 'FieldWrapper'\n"],"mappings":";;;;;;;AA4BA,IAAa,KAAgB,EAC3B,aACA,UACA,YACA,UACA,WACA,gBACA,aACA,cACA,eACA,GAAG,QAEH,kBAAA,cAAC,OAAQ,GACP,kBAAA,cAAC,OAAD,EACE,WAAW,EACT,QACA,QACA,gBACA,mBACA,KAAa,UACd,EAUG,EARJ,kBAAA,cAAC,GAAD;CAAO,SAAS;CAAmB;CAAsB;CAEjD,EADL,EACK,EACP,KACC,kBAAA,cAAC,GAAD;CAAM,MAAM,GAAQ;CAAM,SAAS,GAAQ;CAAS,MAAK;CAElD,EADJ,EAAO,MACH,CAEL,EACL,KAAe,kBAAA,cAAC,GAAD,EAAa,WAAU,QAAkC,EAA1B,EAA0B,EACxE,GACA,KAAS,kBAAA,cAAC,GAAD,EAAe,WAAU,QAA8B,EAAtB,EAAsB,CAC7D;AAGR,EAAa,cAAc"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Loader.js","names":[],"sources":["../../../src/components/loader/Loader.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\n\nconst Dot = styled('div', {\n base: [\n 'animate-pulse',\n 'bg-current',\n 'rounded-full',\n 'animation-duration-900',\n 'nth-3:animation-delay-300',\n 'nth-4:animation-delay-600'\n ],\n variants: {\n size: {\n sm: ['size-1', 'mx-0.5'],\n md: ['size-1.5', 'mx-0.5'],\n lg: ['size-2', 'mx-[3px]']\n }\n }\n})\n\ntype LoaderProps = React.ComponentProps<'div'> & {\n message?: string\n size?: 'sm' | 'md' | 'lg'\n}\n\nexport const Loader = ({\n className,\n message = 'Loading',\n size = 'md',\n ...props\n}: LoaderProps) => (\n <div\n className={clsx('flex', 'justify-center', className)}\n role=\"alert\"\n {...props}\n >\n <span className
|
|
1
|
+
{"version":3,"file":"Loader.js","names":[],"sources":["../../../src/components/loader/Loader.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\n\nconst Dot = styled('div', {\n base: [\n 'animate-pulse',\n 'bg-current',\n 'rounded-full',\n 'animation-duration-900',\n 'nth-3:animation-delay-300',\n 'nth-4:animation-delay-600'\n ],\n variants: {\n size: {\n sm: ['size-1', 'mx-0.5'],\n md: ['size-1.5', 'mx-0.5'],\n lg: ['size-2', 'mx-[3px]']\n }\n }\n})\n\ntype LoaderProps = React.ComponentProps<'div'> & {\n message?: string\n size?: 'sm' | 'md' | 'lg'\n}\n\nexport const Loader = ({\n className,\n message = 'Loading',\n size = 'md',\n ...props\n}: LoaderProps) => (\n <div\n className={clsx('flex', 'justify-center', className)}\n role=\"alert\"\n {...props}\n >\n <span className=\"sr-only\">{message}</span>\n <Dot size={size} />\n <Dot size={size} />\n <Dot size={size} />\n </div>\n)\n"],"mappings":";;;;AAKA,IAAM,IAAM,EAAO,OAAO;CACxB,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACD;CACD,UAAU,EACR,MAAM;EACJ,IAAI,CAAC,UAAU,SAAS;EACxB,IAAI,CAAC,YAAY,SAAS;EAC1B,IAAI,CAAC,UAAU,WAAW;EAC3B,EACF;CACF,CAAC,EAOW,KAAU,EACrB,cACA,aAAU,WACV,UAAO,MACP,GAAG,QAEH,kBAAA,cAAC,OAAD;CACE,WAAW,EAAK,QAAQ,kBAAkB,EAAU;CACpD,MAAK;CACL,GAAI;CAMA,EAJJ,kBAAA,cAAC,QAAD,EAAM,WAAU,WAA0B,EAAf,EAAe,EAC1C,kBAAA,cAAC,GAAD,EAAW,SAAQ,CAAA,EACnB,kBAAA,cAAC,GAAD,EAAW,SAAQ,CAAA,EACnB,kBAAA,cAAC,GAAD,EAAW,SAAQ,CAAA,CACf"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NumberInputStepper.js","names":[],"sources":["../../../src/components/number-input/NumberInputStepper.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { ActionIcon } from '../action-icon/ActionIcon'\nimport { Icon } from '../icon/Icon'\nimport { Tooltip } from '../tooltip/Tooltip'\n\
|
|
1
|
+
{"version":3,"file":"NumberInputStepper.js","names":[],"sources":["../../../src/components/number-input/NumberInputStepper.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { ActionIcon } from '../action-icon/ActionIcon'\nimport { Icon } from '../icon/Icon'\nimport { Tooltip } from '../tooltip/Tooltip'\n\nconst StyledStepperButton = styled(ActionIcon, {\n base: [\n 'rounded-md',\n 'z-1',\n 'h-full!',\n 'hover:[&_svg]:text-grey-800',\n 'hover:bg-grey-100',\n '[&_svg]:text-grey-700',\n 'active:[&_svg]:text-grey-900',\n 'active:bg-grey-200',\n 'disabled:opacity-30',\n 'disabled:pointer-events-none'\n ],\n variants: {\n fieldAppearance: {\n standard: ['bg-white', 'border-grey-800!'],\n modern: ['bg-grey-100', 'border-grey-100!', 'hover:bg-grey-200!']\n },\n emphasis: {\n bold: [\n '[&_svg]:text-primary-700',\n 'hover:bg-primary-100!',\n 'hover:[&_svg]:text-primary-800!',\n 'active:bg-primary-200!',\n 'active:[&_svg]:text-primary-900!'\n ]\n }\n },\n compoundVariants: [\n {\n fieldAppearance: 'standard',\n emphasis: 'bold',\n class: ['bg-white', 'border-primary-800!']\n },\n {\n fieldAppearance: 'modern',\n emphasis: 'bold',\n class: ['bg-white!', 'hover:bg-primary-100!']\n }\n ]\n})\n\ntype NumberInputStepperProps = Omit<\n React.ComponentProps<typeof ActionIcon>,\n 'children'\n> &\n Omit<React.ComponentProps<typeof StyledStepperButton>, 'children'> & {\n icon: React.FC<React.SVGProps<SVGSVGElement>>\n showTooltip?: boolean\n disabledTooltipContent?: string\n }\n\nexport const NumberInputStepper = React.forwardRef<\n HTMLButtonElement,\n NumberInputStepperProps\n>((props, forwardedRef) => {\n const {\n icon,\n disabledTooltipContent,\n showTooltip,\n fieldAppearance = 'standard',\n ...rest\n } = props\n\n /**\n * Focus has been removed from the button\n * as the increment and decrement buttons should be keyboard accessible via arrow keys.\n * see MDN docs https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/spinbutton_role\n */\n return (\n <Tooltip>\n <Tooltip.Trigger asChild>\n <span className=\"z-1\" tabIndex={-1}>\n <StyledStepperButton\n hasTooltip={false}\n tabIndex={-1}\n appearance=\"outline\"\n fieldAppearance={fieldAppearance}\n ref={forwardedRef}\n {...rest}\n >\n <Icon is={icon} />\n </StyledStepperButton>\n </span>\n </Tooltip.Trigger>\n {showTooltip && (\n <Tooltip.Content>{disabledTooltipContent}</Tooltip.Content>\n )}\n </Tooltip>\n )\n})\n"],"mappings":";;;;;;AAQA,IAAM,IAAsB,EAAO,GAAY;CAC7C,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD;CACD,UAAU;EACR,iBAAiB;GACf,UAAU,CAAC,YAAY,mBAAmB;GAC1C,QAAQ;IAAC;IAAe;IAAoB;IAAqB;GAClE;EACD,UAAU,EACR,MAAM;GACJ;GACA;GACA;GACA;GACA;GACD,EACF;EACF;CACD,kBAAkB,CAChB;EACE,iBAAiB;EACjB,UAAU;EACV,OAAO,CAAC,YAAY,sBAAsB;EAC3C,EACD;EACE,iBAAiB;EACjB,UAAU;EACV,OAAO,CAAC,aAAa,wBAAwB;EAC9C,CACF;CACF,CAAC,EAYW,IAAqB,EAAM,YAGrC,GAAO,MAAiB;CACzB,IAAM,EACJ,SACA,2BACA,gBACA,qBAAkB,YAClB,GAAG,MACD;AAOJ,QACE,kBAAA,cAAC,GAAA,MACC,kBAAA,cAAC,EAAQ,SAAT,EAAiB,SAAA,IAaC,EAZhB,kBAAA,cAAC,QAAD;EAAM,WAAU;EAAM,UAAU;EAWzB,EAVL,kBAAA,cAAC,GAAD;EACE,YAAY;EACZ,UAAU;EACV,YAAW;EACM;EACjB,KAAK;EACL,GAAI;EAGgB,EADpB,kBAAA,cAAC,GAAD,EAAM,IAAI,GAAQ,CAAA,CACE,CACjB,CACS,EACjB,KACC,kBAAA,cAAC,EAAQ,SAAA,MAAS,EAAyC,CAErD;EAEZ"}
|
|
@@ -4,7 +4,7 @@ import * as t from "react";
|
|
|
4
4
|
var n = (e, t, n) => (e - t) / (n - t) * 100, r = (e, t, r) => {
|
|
5
5
|
let i = n(e, t, r);
|
|
6
6
|
return i <= 10 ? 0 : i >= 90 ? 100 : 50;
|
|
7
|
-
}, i = ({ min: i, max: a, steps: o = [] }) => o.length === 0 ? null : /* @__PURE__ */ t.createElement("div", { className: "
|
|
7
|
+
}, i = ({ min: i, max: a, steps: o = [] }) => o.length === 0 ? null : /* @__PURE__ */ t.createElement("div", { className: "relative mt-3 h-3 w-full" }, o.map((o) => /* @__PURE__ */ t.createElement(e, {
|
|
8
8
|
as: "span",
|
|
9
9
|
key: o.value,
|
|
10
10
|
style: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SliderSteps.js","names":[],"sources":["../../../src/components/slider/SliderSteps.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Text } from '../text/Text'\n\nexport type SliderStepsType = {\n steps?: { label: string; value: number }[]\n}\n\ntype SliderStepsProps = {\n min: number\n max: number\n} & SliderStepsType\n\nconst getPercentValue = (value: number, min: number, max: number): number => {\n return ((value - min) / (max - min)) * 100\n}\n\nconst getTransformValue = (value: number, min: number, max: number): number => {\n const percentage = getPercentValue(value, min, max)\n\n if (percentage <= 10) return 0\n if (percentage >= 90) return 100\n return 50\n}\n\nexport const SliderSteps = ({ min, max, steps = [] }: SliderStepsProps) => {\n if (steps.length === 0) return null\n\n return (\n <div className=\"
|
|
1
|
+
{"version":3,"file":"SliderSteps.js","names":[],"sources":["../../../src/components/slider/SliderSteps.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Text } from '../text/Text'\n\nexport type SliderStepsType = {\n steps?: { label: string; value: number }[]\n}\n\ntype SliderStepsProps = {\n min: number\n max: number\n} & SliderStepsType\n\nconst getPercentValue = (value: number, min: number, max: number): number => {\n return ((value - min) / (max - min)) * 100\n}\n\nconst getTransformValue = (value: number, min: number, max: number): number => {\n const percentage = getPercentValue(value, min, max)\n\n if (percentage <= 10) return 0\n if (percentage >= 90) return 100\n return 50\n}\n\nexport const SliderSteps = ({ min, max, steps = [] }: SliderStepsProps) => {\n if (steps.length === 0) return null\n\n return (\n <div className=\"relative mt-3 h-3 w-full\">\n {steps.map((step) => (\n <Text\n as=\"span\"\n key={step.value}\n style={{\n '--left': `${getPercentValue(step.value, min, max)}%`,\n '--translate-x': `-${getTransformValue(step.value, min, max)}%`\n }}\n className=\"text-grey-700 absolute left-(--left) translate-x-(--translate-x)\"\n >\n {step.label}\n </Text>\n ))}\n </div>\n )\n}\n"],"mappings":";;;AAaA,IAAM,KAAmB,GAAe,GAAa,OAC1C,IAAQ,MAAQ,IAAM,KAAQ,KAGnC,KAAqB,GAAe,GAAa,MAAwB;CAC7E,IAAM,IAAa,EAAgB,GAAO,GAAK,EAAI;AAInD,QAFI,KAAc,KAAW,IACzB,KAAc,KAAW,MACtB;GAGI,KAAe,EAAE,QAAK,QAAK,WAAQ,EAAE,OAC5C,EAAM,WAAW,IAAU,OAG7B,kBAAA,cAAC,OAAD,EAAK,WAAU,4BAcT,EAbH,EAAM,KAAK,MACV,kBAAA,cAAC,GAAD;CACE,IAAG;CACH,KAAK,EAAK;CACV,OAAO;EACL,UAAU,GAAG,EAAgB,EAAK,OAAO,GAAK,EAAI,CAAC;EACnD,iBAAiB,IAAI,EAAkB,EAAK,OAAO,GAAK,EAAI,CAAC;EAC9D;CACD,WAAU;CAGL,EADJ,EAAK,MACD,CACP,CACE"}
|
|
@@ -5,7 +5,7 @@ import * as n from "react";
|
|
|
5
5
|
var r = ({ className: r, ...i }) => /* @__PURE__ */ n.createElement(e, {
|
|
6
6
|
size: "md",
|
|
7
7
|
...i,
|
|
8
|
-
className: t("shrink-0 self-start
|
|
8
|
+
className: t("my-1 shrink-0 self-start", r)
|
|
9
9
|
});
|
|
10
10
|
//#endregion
|
|
11
11
|
export { r as TreeIcon };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TreeIcon.js","names":[],"sources":["../../../src/components/tree/TreeIcon.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport * as React from 'react'\n\nimport { Icon } from '~/components/icon/Icon'\n\nexport const TreeIcon = ({\n className,\n ...props\n}: React.ComponentProps<typeof Icon>): JSX.Element => (\n <Icon\n size=\"md\"\n {...props}\n className={clsx('shrink-0 self-start
|
|
1
|
+
{"version":3,"file":"TreeIcon.js","names":[],"sources":["../../../src/components/tree/TreeIcon.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport * as React from 'react'\n\nimport { Icon } from '~/components/icon/Icon'\n\nexport const TreeIcon = ({\n className,\n ...props\n}: React.ComponentProps<typeof Icon>): JSX.Element => (\n <Icon\n size=\"md\"\n {...props}\n className={clsx('my-1 shrink-0 self-start', className)}\n />\n)\n"],"mappings":";;;;AAKA,IAAa,KAAY,EACvB,cACA,GAAG,QAEH,kBAAA,cAAC,GAAD;CACE,MAAK;CACL,GAAI;CACJ,WAAW,EAAK,4BAA4B,EAAU;CACtD,CAAA"}
|
|
@@ -5,7 +5,7 @@ var n = t.forwardRef(({ className: n, ...r }, i) => /* @__PURE__ */ t.createElem
|
|
|
5
5
|
...r,
|
|
6
6
|
ref: i,
|
|
7
7
|
role: "treeitem",
|
|
8
|
-
className: e("not-first:mt-0.5
|
|
8
|
+
className: e("flex items-center gap-2 not-first:mt-0.5", n)
|
|
9
9
|
}));
|
|
10
10
|
//#endregion
|
|
11
11
|
export { n as TreeListItem };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TreeListItem.js","names":[],"sources":["../../../src/components/tree/TreeListItem.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport * as React from 'react'\n\ntype TreeListItemProps = React.ComponentProps<'li'>\n\nexport const TreeListItem = React.forwardRef<HTMLLIElement, TreeListItemProps>(\n ({ className, ...props }, ref) => (\n <li\n {...props}\n ref={ref}\n role=\"treeitem\"\n className={clsx('not-first:mt-0.5
|
|
1
|
+
{"version":3,"file":"TreeListItem.js","names":[],"sources":["../../../src/components/tree/TreeListItem.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport * as React from 'react'\n\ntype TreeListItemProps = React.ComponentProps<'li'>\n\nexport const TreeListItem = React.forwardRef<HTMLLIElement, TreeListItemProps>(\n ({ className, ...props }, ref) => (\n <li\n {...props}\n ref={ref}\n role=\"treeitem\"\n className={clsx('flex items-center gap-2 not-first:mt-0.5', className)}\n />\n )\n)\n"],"mappings":";;;AAKA,IAAa,IAAe,EAAM,YAC/B,EAAE,cAAW,GAAG,KAAS,MACxB,kBAAA,cAAC,MAAD;CACE,GAAI;CACC;CACL,MAAK;CACL,WAAW,EAAK,4CAA4C,EAAU;CACtE,CAAA,CAEL"}
|