@scouterna/ui-react 0.0.6 → 0.1.3
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/README.md +1 -1
- package/dist/components/button/button.d.ts +5 -12
- package/dist/components/button/button.js +41 -15
- package/dist/components/button/button.js.map +1 -1
- package/dist/components/callout/callout.d.ts +10 -0
- package/dist/components/callout/callout.js +54 -0
- package/dist/components/callout/callout.js.map +1 -0
- package/dist/components/card/card.d.ts +8 -0
- package/dist/components/card/card.js +32 -0
- package/dist/components/card/card.js.map +1 -0
- package/dist/components/checkbox/checkbox.d.ts +3 -2
- package/dist/components/checkbox/checkbox.js +7 -9
- package/dist/components/checkbox/checkbox.js.map +1 -1
- package/dist/components/field/field.d.ts +13 -0
- package/dist/components/field/field.js +17 -0
- package/dist/components/field/field.js.map +1 -0
- package/dist/components/input/input.d.ts +3 -6
- package/dist/components/input/input.js +18 -19
- package/dist/components/input/input.js.map +1 -1
- package/dist/components/menu/menu.d.ts +13 -0
- package/dist/components/menu/menu.js +79 -0
- package/dist/components/menu/menu.js.map +1 -0
- package/dist/components/select/select.d.ts +7 -17
- package/dist/components/select/select.js +11 -21
- package/dist/components/select/select.js.map +1 -1
- package/dist/components/table/table-test.d.ts +2 -0
- package/dist/components/table/table-test.js +46 -0
- package/dist/components/table/table-test.js.map +1 -0
- package/dist/components/table/table.d.ts +11 -0
- package/dist/components/table/table.js +75 -0
- package/dist/components/table/table.js.map +1 -0
- package/dist/index.d.ts +5 -1
- package/dist/index.js +5 -1
- package/dist/index.js.map +1 -1
- package/dist/style.css +382 -26
- package/package.json +15 -16
- package/dist/components/form-field/form-field.d.ts +0 -16
- package/dist/components/form-field/form-field.js +0 -16
- package/dist/components/form-field/form-field.js.map +0 -1
|
@@ -1,13 +1,10 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import
|
|
2
|
+
import { Select as SelectPrimitive } from "@base-ui-components/react/select";
|
|
3
3
|
import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react";
|
|
4
|
-
import { forwardRef } from "react";
|
|
5
4
|
import { cn } from "../../lib/utils.js";
|
|
6
|
-
const Root = ({ children,
|
|
7
|
-
Root.displayName = SelectPrimitive.Root.displayName;
|
|
5
|
+
const Root = ({ children, ...props }) => (_jsxs(SelectPrimitive.Root, { ...props, children: [_jsx(Trigger, { children: _jsx(SelectPrimitive.Value, {}) }), _jsx(Positioner, { className: "text-gray-dark", children: children })] }));
|
|
8
6
|
const Group = SelectPrimitive.Group;
|
|
9
|
-
const
|
|
10
|
-
const Trigger = forwardRef(({ className, children, ...props }, ref) => (_jsxs(SelectPrimitive.Trigger, { ref: ref, className: cn(`
|
|
7
|
+
const Trigger = ({ className, children, ...props }) => (_jsxs(SelectPrimitive.Trigger, { className: cn(`
|
|
11
8
|
flex
|
|
12
9
|
items-center
|
|
13
10
|
justify-between
|
|
@@ -24,19 +21,12 @@ const Trigger = forwardRef(({ className, children, ...props }, ref) => (_jsxs(Se
|
|
|
24
21
|
data-[placeholder]:text-gray-600
|
|
25
22
|
data-[placeholder]:italic
|
|
26
23
|
[&>span]:whitespace-nowrap
|
|
27
|
-
`, className), ...props, children: [children, _jsx(SelectPrimitive.Icon, {
|
|
28
|
-
|
|
29
|
-
const
|
|
30
|
-
|
|
31
|
-
const
|
|
32
|
-
|
|
33
|
-
const
|
|
34
|
-
|
|
35
|
-
const Label = forwardRef(({ className, ...props }, ref) => (_jsx(SelectPrimitive.Label, { ref: ref, className: cn("px-[25px] text-sm leading-[25px] font-semibold select-none", className), ...props })));
|
|
36
|
-
Label.displayName = SelectPrimitive.Label.displayName;
|
|
37
|
-
const Item = forwardRef(({ className, children, ...props }, ref) => (_jsxs(SelectPrimitive.Item, { ref: ref, className: cn("relative flex h-7 select-none items-center rounded-sm pl-[25px] pr-[35px] leading-none data-[disabled]:pointer-events-none data-[highlighted]:bg-blue-100 data-[disabled]:opacity-50 data-[highlighted]:text-blue data-[highlighted]:outline-none", className), ...props, children: [_jsx(SelectPrimitive.ItemText, { children: children }), _jsx(SelectPrimitive.ItemIndicator, { className: "absolute left-1.5 inline-flex w-4 items-center justify-center", children: _jsx(CheckIcon, {}) })] })));
|
|
38
|
-
Item.displayName = SelectPrimitive.Item.displayName;
|
|
39
|
-
const Separator = forwardRef(({ className, ...props }, ref) => (_jsx(SelectPrimitive.Separator, { ref: ref, className: cn("m-[5px] h-px bg-gray-300", className), ...props })));
|
|
40
|
-
Separator.displayName = SelectPrimitive.Separator.displayName;
|
|
41
|
-
export { Root, Group, Value, Trigger, Content, Label, Item, Separator, ScrollUpButton, ScrollDownButton, };
|
|
24
|
+
`, className), ...props, children: [children, _jsx(SelectPrimitive.Icon, { children: _jsx(ChevronDownIcon, { className: "size-4 opacity-50" }) })] }));
|
|
25
|
+
const ScrollUpArrow = ({ className, ...props }) => (_jsx(SelectPrimitive.ScrollUpArrow, { className: cn("absolute top-0 inset-x-0 flex cursor-default items-center justify-center py-1 z-10", className), ...props, children: _jsx(ChevronUpIcon, { className: "size-4" }) }));
|
|
26
|
+
const ScrollDownArrow = ({ className, ...props }) => (_jsx(SelectPrimitive.ScrollDownArrow, { className: cn("absolute bottom-0 inset-x-0 flex cursor-default items-center justify-center py-1", className), ...props, children: _jsx(ChevronDownIcon, { className: "size-4" }) }));
|
|
27
|
+
const Positioner = ({ className, children, ...props }) => (_jsx(SelectPrimitive.Portal, { children: _jsxs(SelectPrimitive.Positioner, { className: cn("relative z-50 min-w-[calc(var(--anchor-width)+25px-var(--spacing)*1.5)] overflow-y-auto overflow-x-hidden rounded-lg border bg-gray-100 text-popover-foreground shadow-md border-gray-300", className), ...props, children: [_jsx(ScrollUpArrow, {}), _jsx(SelectPrimitive.Popup, { className: cn("p-1.5"), children: children }), _jsx(ScrollDownArrow, {})] }) }));
|
|
28
|
+
const GroupLabel = ({ className, ...props }) => (_jsx(SelectPrimitive.GroupLabel, { className: cn("px-[25px] text-sm leading-[25px] font-semibold select-none", className), ...props }));
|
|
29
|
+
const Item = ({ className, children, ...props }) => (_jsxs(SelectPrimitive.Item, { className: cn("relative flex h-7 select-none items-center rounded-sm pl-[25px] pr-[35px] leading-none data-[disabled]:pointer-events-none data-[highlighted]:bg-blue-100 data-[disabled]:opacity-50 data-[highlighted]:text-blue data-[highlighted]:outline-none", className), ...props, children: [_jsx(SelectPrimitive.ItemText, { children: children }), _jsx(SelectPrimitive.ItemIndicator, { className: "absolute left-1.5 inline-flex w-4 items-center justify-center", children: _jsx(CheckIcon, {}) })] }));
|
|
30
|
+
const Separator = ({ className, ...props }) => (_jsx(SelectPrimitive.Separator, { className: cn("m-[5px] h-px bg-gray-300", className), ...props }));
|
|
31
|
+
export { Root, Group, GroupLabel, Item, Separator };
|
|
42
32
|
//# sourceMappingURL=select.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"select.js","sourceRoot":"","sources":["../../../src/components/select/select.tsx"],"names":[],"mappings":";AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"select.js","sourceRoot":"","sources":["../../../src/components/select/select.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { createColumnHelper, getCoreRowModel, getFilteredRowModel, getSortedRowModel, useReactTable, } from "@tanstack/react-table";
|
|
3
|
+
import { useState } from "react";
|
|
4
|
+
import { Table } from "./table.js";
|
|
5
|
+
const defaultData = [
|
|
6
|
+
{ firstName: "Alice", lastName: "Smith", role: "scout" },
|
|
7
|
+
{ firstName: "Bob", lastName: "Abraham", role: "leader" },
|
|
8
|
+
{ firstName: "Charlie", lastName: "Brown", role: "volunteer" },
|
|
9
|
+
];
|
|
10
|
+
const columnHelper = createColumnHelper();
|
|
11
|
+
const columns = [
|
|
12
|
+
columnHelper.accessor("firstName", {
|
|
13
|
+
header: () => "Förnamn",
|
|
14
|
+
size: 200,
|
|
15
|
+
}),
|
|
16
|
+
columnHelper.accessor("lastName", {
|
|
17
|
+
header: () => "Efternamn",
|
|
18
|
+
size: 200,
|
|
19
|
+
}),
|
|
20
|
+
columnHelper.accessor("role", {
|
|
21
|
+
header: () => "Roll",
|
|
22
|
+
enableSorting: false,
|
|
23
|
+
cell: (info) => {
|
|
24
|
+
const role = info.getValue();
|
|
25
|
+
return role.charAt(0).toUpperCase() + role.slice(1);
|
|
26
|
+
},
|
|
27
|
+
}),
|
|
28
|
+
];
|
|
29
|
+
function TableTest() {
|
|
30
|
+
const [data, _setData] = useState(() => [...defaultData]);
|
|
31
|
+
const table = useReactTable({
|
|
32
|
+
data,
|
|
33
|
+
columns,
|
|
34
|
+
columnResizeMode: "onChange",
|
|
35
|
+
getCoreRowModel: getCoreRowModel(),
|
|
36
|
+
getFilteredRowModel: getFilteredRowModel(),
|
|
37
|
+
getSortedRowModel: getSortedRowModel(),
|
|
38
|
+
});
|
|
39
|
+
return (_jsxs(_Fragment, { children: [_jsx("pre", { className: "mb-4 min-h-48", children: JSON.stringify({
|
|
40
|
+
// columnSizing: table.getState().columnSizing,
|
|
41
|
+
// columnSizeVars,
|
|
42
|
+
sort: table.getState().sorting,
|
|
43
|
+
}, null, 2) }), _jsx(Table, { table: table, className: "w-full" })] }));
|
|
44
|
+
}
|
|
45
|
+
export { TableTest };
|
|
46
|
+
//# sourceMappingURL=table-test.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"table-test.js","sourceRoot":"","sources":["../../../src/components/table/table-test.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,kBAAkB,EAClB,eAAe,EACf,mBAAmB,EACnB,iBAAiB,EACjB,aAAa,GACd,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AAQnC,MAAM,WAAW,GAAe;IAC9B,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE;IACxD,EAAE,SAAS,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,IAAI,EAAE,QAAQ,EAAE;IACzD,EAAE,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAE,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE;CAC/D,CAAC;AAEF,MAAM,YAAY,GAAG,kBAAkB,EAAY,CAAC;AAEpD,MAAM,OAAO,GAAG;IACd,YAAY,CAAC,QAAQ,CAAC,WAAW,EAAE;QACjC,MAAM,EAAE,GAAG,EAAE,CAAC,SAAS;QACvB,IAAI,EAAE,GAAG;KACV,CAAC;IACF,YAAY,CAAC,QAAQ,CAAC,UAAU,EAAE;QAChC,MAAM,EAAE,GAAG,EAAE,CAAC,WAAW;QACzB,IAAI,EAAE,GAAG;KACV,CAAC;IACF,YAAY,CAAC,QAAQ,CAAC,MAAM,EAAE;QAC5B,MAAM,EAAE,GAAG,EAAE,CAAC,MAAM;QACpB,aAAa,EAAE,KAAK;QACpB,IAAI,EAAE,CAAC,IAAI,EAAE,EAAE;YACb,MAAM,IAAI,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC;YAC7B,OAAO,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;QACtD,CAAC;KACF,CAAC;CACH,CAAC;AAEF,SAAS,SAAS;IAChB,MAAM,CAAC,IAAI,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,CAAC,GAAG,WAAW,CAAC,CAAC,CAAC;IAE1D,MAAM,KAAK,GAAG,aAAa,CAAC;QAC1B,IAAI;QACJ,OAAO;QACP,gBAAgB,EAAE,UAAU;QAC5B,eAAe,EAAE,eAAe,EAAE;QAClC,mBAAmB,EAAE,mBAAmB,EAAE;QAC1C,iBAAiB,EAAE,iBAAiB,EAAE;KACvC,CAAC,CAAC;IAEH,OAAO,CACL,8BACE,cAAK,SAAS,EAAC,eAAe,YAC3B,IAAI,CAAC,SAAS,CACb;oBACE,+CAA+C;oBAC/C,kBAAkB;oBAClB,IAAI,EAAE,KAAK,CAAC,QAAQ,EAAE,CAAC,OAAO;iBAC/B,EACD,IAAI,EACJ,CAAC,CACF,GACG,EACN,KAAC,KAAK,IAAC,KAAK,EAAE,KAAK,EAAE,SAAS,EAAC,QAAQ,GAAG,IACzC,CACJ,CAAC;AACJ,CAAC;AAED,OAAO,EAAE,SAAS,EAAE,CAAC"}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { type Table as TanstackTable } from "@tanstack/react-table";
|
|
2
|
+
import { Card } from "../card/card.js";
|
|
3
|
+
export type Props<TData> = Parameters<typeof Card>[0] & {
|
|
4
|
+
table: TanstackTable<TData>;
|
|
5
|
+
};
|
|
6
|
+
declare function Table<TData>(props: Props<TData>): import("react/jsx-runtime").JSX.Element;
|
|
7
|
+
declare function TableBody<TData>({ table }: {
|
|
8
|
+
table: TanstackTable<TData>;
|
|
9
|
+
}): import("react/jsx-runtime").JSX.Element;
|
|
10
|
+
export declare const MemoizedTableBody: typeof TableBody;
|
|
11
|
+
export { Table };
|
|
@@ -0,0 +1,75 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
2
|
+
import { flexRender, } from "@tanstack/react-table";
|
|
3
|
+
import { ArrowDownIcon, ArrowUpIcon, ChevronsUpDownIcon, EllipsisVerticalIcon, ListFilterIcon, } from "lucide-react";
|
|
4
|
+
import { memo, useId, useMemo } from "react";
|
|
5
|
+
import { Fragment } from "react/jsx-runtime";
|
|
6
|
+
import { cn } from "../../lib/utils.js";
|
|
7
|
+
import { Button } from "../button/button.js";
|
|
8
|
+
import { Card } from "../card/card.js";
|
|
9
|
+
import * as Menu from "../menu/menu.js";
|
|
10
|
+
function Table(props) {
|
|
11
|
+
const { table, className, ...otherProps } = props;
|
|
12
|
+
/**
|
|
13
|
+
* Instead of calling `column.getSize()` on every render for every header
|
|
14
|
+
* and especially every data cell (very expensive),
|
|
15
|
+
* we will calculate all column sizes at once at the root table level in a useMemo
|
|
16
|
+
* and pass the column sizes down as CSS variables to the <table> element.
|
|
17
|
+
*/
|
|
18
|
+
// biome-ignore lint/correctness/useExhaustiveDependencies: This is carefully optimized to avoid unnecessary recalculations
|
|
19
|
+
const columnSizeVars = useMemo(() => {
|
|
20
|
+
const headers = table.getFlatHeaders();
|
|
21
|
+
const colSizes = {};
|
|
22
|
+
for (const header of headers) {
|
|
23
|
+
colSizes[`--header-${header.id}-size`] = header.getSize();
|
|
24
|
+
colSizes[`--col-${header.column.id}-size`] = header.column.getSize();
|
|
25
|
+
}
|
|
26
|
+
return colSizes;
|
|
27
|
+
}, [table.getState().columnSizingInfo, table.getState().columnSizing]);
|
|
28
|
+
return (_jsx(Card, { className: cn("p-0 inline-block overflow-auto", className), ...otherProps, variant: "light", children: _jsxs("table", { style: {
|
|
29
|
+
...columnSizeVars,
|
|
30
|
+
width: (table.options.enableColumnResizing ?? true)
|
|
31
|
+
? table.getTotalSize()
|
|
32
|
+
: "100%",
|
|
33
|
+
}, children: [_jsx("thead", { className: "border-b border-gray-300", children: table.getHeaderGroups().map((headerGroup) => (_jsx("tr", { children: headerGroup.headers.map((header) => (_jsxs("th", { className: "relative p-2 select-none", style: {
|
|
34
|
+
width: `calc(var(--header-${header?.id}-size) * 1px)`,
|
|
35
|
+
}, children: [_jsxs("div", { className: "flex justify-between pr-1", children: [_jsx(HeaderTitle, { header: header }), _jsxs("div", { className: "flex gap-0.5", children: [_jsx(Button, { size: "tiny-icon", variant: "text", color: "gray", children: _jsx(ListFilterIcon, {}) }), _jsx(HeaderMenu, { header: header })] })] }), header.column.getCanResize() && (_jsx(ResizeHandle, { table: table, header: header }))] }, header.id))) }, headerGroup.id))) }), table.getState().columnSizingInfo.isResizingColumn ? (_jsx(MemoizedTableBody, { table: table })) : (_jsx(TableBody, { table: table })), _jsx("tfoot", { children: table.getFooterGroups().map((footerGroup) => (_jsx("tr", { children: footerGroup.headers.map((header) => (_jsx("th", { children: header.isPlaceholder
|
|
36
|
+
? null
|
|
37
|
+
: flexRender(header.column.columnDef.footer, header.getContext()) }, header.id))) }, footerGroup.id))) })] }) }));
|
|
38
|
+
}
|
|
39
|
+
function TableBody({ table }) {
|
|
40
|
+
return (_jsx("tbody", { children: table.getRowModel().rows.map((row) => (_jsx("tr", { className: "not-last:border-b border-gray-300", children: row.getVisibleCells().map((cell) => (_jsx("td", { className: "text-left px-2 py-1", children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id))) }, row.id))) }));
|
|
41
|
+
}
|
|
42
|
+
function ResizeHandle({ table, header, }) {
|
|
43
|
+
return (_jsx("div", { "aria-hidden": true, onDoubleClick: () => header.column.resetSize(), onMouseDown: header.getResizeHandler(), onTouchStart: header.getResizeHandler(), className: cn("absolute flex justify-center items-center py-2 top-0 right-0 h-full w-2 cursor-col-resize touch-none select-none", "after:w-0.5 after:h-full after:bg-gray-300", header.column.getIsResizing() && "bg-blue-100 after:invisible"), style: {
|
|
44
|
+
transform: table.options.columnResizeMode === "onEnd" &&
|
|
45
|
+
header.column.getIsResizing()
|
|
46
|
+
? `translateX(${table.getState().columnSizingInfo.deltaOffset}px)`
|
|
47
|
+
: "",
|
|
48
|
+
} }));
|
|
49
|
+
}
|
|
50
|
+
// biome-ignore lint/suspicious/noExplicitAny: We don't care about the type here
|
|
51
|
+
function HeaderTitle({ header }) {
|
|
52
|
+
const sortDescriptionId = useId();
|
|
53
|
+
if (header.isPlaceholder) {
|
|
54
|
+
return null;
|
|
55
|
+
}
|
|
56
|
+
const rendered = flexRender(header.column.columnDef.header, header.getContext());
|
|
57
|
+
if (!header.column.getCanSort()) {
|
|
58
|
+
return rendered;
|
|
59
|
+
}
|
|
60
|
+
return (_jsxs(_Fragment, { children: [_jsxs("button", { type: "button", className: cn("flex-1 flex items-center gap-1 cursor-pointer"), onClick: header.column.getToggleSortingHandler(), "aria-describedby": sortDescriptionId, children: [rendered, header.column.getIsSorted() === "asc" && (_jsx(ArrowUpIcon, { className: "size-4" })), header.column.getIsSorted() === "desc" && (_jsx(ArrowDownIcon, { className: "size-4" }))] }), _jsx("p", { id: sortDescriptionId, hidden: true, children: "Toggle column sorting" })] }));
|
|
61
|
+
}
|
|
62
|
+
// biome-ignore lint/suspicious/noExplicitAny: We don't care about the type here
|
|
63
|
+
function HeaderMenu({ header }) {
|
|
64
|
+
const menuSections = [
|
|
65
|
+
header.column.getCanSort() && (_jsxs(Fragment, { children: [header.column.getIsSorted() !== "asc" && (_jsx(Menu.Item, { icon: _jsx(ArrowUpIcon, {}), onClick: () => header.column.toggleSorting(false), children: "Sort Ascending" })), header.column.getIsSorted() !== "desc" && (_jsx(Menu.Item, { icon: _jsx(ArrowDownIcon, {}), onClick: () => header.column.toggleSorting(true), children: "Sort Descending" })), header.column.getIsSorted() && (_jsx(Menu.Item, { icon: _jsx(ChevronsUpDownIcon, {}), onClick: () => header.column.clearSorting(), children: "Clear Sorting" }))] }, "sortMenu")),
|
|
66
|
+
].filter((section) => section !== false);
|
|
67
|
+
if (menuSections.length === 0) {
|
|
68
|
+
return null;
|
|
69
|
+
}
|
|
70
|
+
return (_jsxs(Menu.Root, { children: [_jsx(Menu.Trigger, { render: _jsx(Button, { size: "tiny-icon", variant: "text", color: "gray", children: _jsx(EllipsisVerticalIcon, {}) }) }), _jsx(Menu.Positioner, { align: "start", children: menuSections.map((section, index) => (_jsxs(_Fragment, { children: [section, index < menuSections.length - 1 && _jsx(Menu.Separator, {})] }))) })] }));
|
|
71
|
+
}
|
|
72
|
+
// Special memoized wrapper for our table body that we will use during column resizing
|
|
73
|
+
export const MemoizedTableBody = memo(TableBody, (prev, next) => prev.table.options.data === next.table.options.data);
|
|
74
|
+
export { Table };
|
|
75
|
+
//# sourceMappingURL=table.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"table.js","sourceRoot":"","sources":["../../../src/components/table/table.tsx"],"names":[],"mappings":"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"}
|
package/dist/index.d.ts
CHANGED
|
@@ -1,6 +1,10 @@
|
|
|
1
1
|
export * as Button from "./components/button/button.js";
|
|
2
|
+
export * as Callout from "./components/callout/callout.js";
|
|
3
|
+
export * as Card from "./components/card/card.js";
|
|
2
4
|
export * as Checkbox from "./components/checkbox/checkbox.js";
|
|
3
|
-
export * as
|
|
5
|
+
export * as Field from "./components/field/field.js";
|
|
4
6
|
export * as Input from "./components/input/input.js";
|
|
7
|
+
export * as Menu from "./components/menu/menu.js";
|
|
5
8
|
export * as Select from "./components/select/select.js";
|
|
9
|
+
export * as Table from "./components/table/table.js";
|
|
6
10
|
export * as Toast from "./components/toast/toast.js";
|
package/dist/index.js
CHANGED
|
@@ -1,7 +1,11 @@
|
|
|
1
1
|
export * as Button from "./components/button/button.js";
|
|
2
|
+
export * as Callout from "./components/callout/callout.js";
|
|
3
|
+
export * as Card from "./components/card/card.js";
|
|
2
4
|
export * as Checkbox from "./components/checkbox/checkbox.js";
|
|
3
|
-
export * as
|
|
5
|
+
export * as Field from "./components/field/field.js";
|
|
4
6
|
export * as Input from "./components/input/input.js";
|
|
7
|
+
export * as Menu from "./components/menu/menu.js";
|
|
5
8
|
export * as Select from "./components/select/select.js";
|
|
9
|
+
export * as Table from "./components/table/table.js";
|
|
6
10
|
export * as Toast from "./components/toast/toast.js";
|
|
7
11
|
//# sourceMappingURL=index.js.map
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,MAAM,+BAA+B,CAAC;AACxD,OAAO,KAAK,QAAQ,MAAM,mCAAmC,CAAC;AAC9D,OAAO,KAAK,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,MAAM,+BAA+B,CAAC;AACxD,OAAO,KAAK,OAAO,MAAM,iCAAiC,CAAC;AAC3D,OAAO,KAAK,IAAI,MAAM,2BAA2B,CAAC;AAClD,OAAO,KAAK,QAAQ,MAAM,mCAAmC,CAAC;AAC9D,OAAO,KAAK,KAAK,MAAM,6BAA6B,CAAC;AACrD,OAAO,KAAK,KAAK,MAAM,6BAA6B,CAAC;AACrD,OAAO,KAAK,IAAI,MAAM,2BAA2B,CAAC;AAClD,OAAO,KAAK,MAAM,MAAM,+BAA+B,CAAC;AACxD,OAAO,KAAK,KAAK,MAAM,6BAA6B,CAAC;AACrD,OAAO,KAAK,KAAK,MAAM,6BAA6B,CAAC"}
|