@akbarsafari00/ods-react 0.1.0
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 +61 -0
- package/dist/components/alert-dialog.d.ts +32 -0
- package/dist/components/alert-dialog.d.ts.map +1 -0
- package/dist/components/alert-dialog.js +48 -0
- package/dist/components/alert-dialog.js.map +1 -0
- package/dist/components/alert.d.ts +11 -0
- package/dist/components/alert.d.ts.map +1 -0
- package/dist/components/alert.js +28 -0
- package/dist/components/alert.js.map +1 -0
- package/dist/components/badge.d.ts +10 -0
- package/dist/components/badge.d.ts.map +1 -0
- package/dist/components/badge.js +25 -0
- package/dist/components/badge.js.map +1 -0
- package/dist/components/button-group.d.ts +17 -0
- package/dist/components/button-group.d.ts.map +1 -0
- package/dist/components/button-group.js +38 -0
- package/dist/components/button-group.js.map +1 -0
- package/dist/components/button.d.ts +8 -0
- package/dist/components/button.d.ts.map +1 -0
- package/dist/components/button.js +21 -0
- package/dist/components/button.js.map +1 -0
- package/dist/components/card.d.ts +10 -0
- package/dist/components/card.d.ts.map +1 -0
- package/dist/components/card.js +25 -0
- package/dist/components/card.js.map +1 -0
- package/dist/components/checkbox.d.ts +5 -0
- package/dist/components/checkbox.d.ts.map +1 -0
- package/dist/components/checkbox.js +10 -0
- package/dist/components/checkbox.js.map +1 -0
- package/dist/components/collapsible.d.ts +15 -0
- package/dist/components/collapsible.d.ts.map +1 -0
- package/dist/components/collapsible.js +16 -0
- package/dist/components/collapsible.js.map +1 -0
- package/dist/components/combobox.d.ts +34 -0
- package/dist/components/combobox.d.ts.map +1 -0
- package/dist/components/combobox.js +280 -0
- package/dist/components/combobox.js.map +1 -0
- package/dist/components/context-menu.d.ts +60 -0
- package/dist/components/context-menu.d.ts.map +1 -0
- package/dist/components/context-menu.js +71 -0
- package/dist/components/context-menu.js.map +1 -0
- package/dist/components/data-table.d.ts +68 -0
- package/dist/components/data-table.d.ts.map +1 -0
- package/dist/components/data-table.js +100 -0
- package/dist/components/data-table.js.map +1 -0
- package/dist/components/dialog.d.ts +32 -0
- package/dist/components/dialog.d.ts.map +1 -0
- package/dist/components/dialog.js +43 -0
- package/dist/components/dialog.js.map +1 -0
- package/dist/components/drawer.d.ts +32 -0
- package/dist/components/drawer.d.ts.map +1 -0
- package/dist/components/drawer.js +43 -0
- package/dist/components/drawer.js.map +1 -0
- package/dist/components/field.d.ts +50 -0
- package/dist/components/field.d.ts.map +1 -0
- package/dist/components/field.js +93 -0
- package/dist/components/field.js.map +1 -0
- package/dist/components/icon-button.d.ts +14 -0
- package/dist/components/icon-button.d.ts.map +1 -0
- package/dist/components/icon-button.js +28 -0
- package/dist/components/icon-button.js.map +1 -0
- package/dist/components/input-group.d.ts +17 -0
- package/dist/components/input-group.d.ts.map +1 -0
- package/dist/components/input-group.js +56 -0
- package/dist/components/input-group.js.map +1 -0
- package/dist/components/input.d.ts +9 -0
- package/dist/components/input.d.ts.map +1 -0
- package/dist/components/input.js +7 -0
- package/dist/components/input.js.map +1 -0
- package/dist/components/label.d.ts +5 -0
- package/dist/components/label.d.ts.map +1 -0
- package/dist/components/label.js +8 -0
- package/dist/components/label.js.map +1 -0
- package/dist/components/menubar.d.ts +73 -0
- package/dist/components/menubar.d.ts.map +1 -0
- package/dist/components/menubar.js +74 -0
- package/dist/components/menubar.js.map +1 -0
- package/dist/components/pagination.d.ts +23 -0
- package/dist/components/pagination.d.ts.map +1 -0
- package/dist/components/pagination.js +64 -0
- package/dist/components/pagination.js.map +1 -0
- package/dist/components/progress.d.ts +17 -0
- package/dist/components/progress.d.ts.map +1 -0
- package/dist/components/progress.js +23 -0
- package/dist/components/progress.js.map +1 -0
- package/dist/components/radio-group.d.ts +6 -0
- package/dist/components/radio-group.d.ts.map +1 -0
- package/dist/components/radio-group.js +12 -0
- package/dist/components/radio-group.js.map +1 -0
- package/dist/components/select.d.ts +14 -0
- package/dist/components/select.d.ts.map +1 -0
- package/dist/components/select.js +38 -0
- package/dist/components/select.js.map +1 -0
- package/dist/components/separator.d.ts +5 -0
- package/dist/components/separator.d.ts.map +1 -0
- package/dist/components/separator.js +8 -0
- package/dist/components/separator.js.map +1 -0
- package/dist/components/skeleton.d.ts +23 -0
- package/dist/components/skeleton.d.ts.map +1 -0
- package/dist/components/skeleton.js +18 -0
- package/dist/components/skeleton.js.map +1 -0
- package/dist/components/switch.d.ts +7 -0
- package/dist/components/switch.d.ts.map +1 -0
- package/dist/components/switch.js +8 -0
- package/dist/components/switch.js.map +1 -0
- package/dist/components/table.d.ts +22 -0
- package/dist/components/table.d.ts.map +1 -0
- package/dist/components/table.js +31 -0
- package/dist/components/table.js.map +1 -0
- package/dist/components/tabs.d.ts +36 -0
- package/dist/components/tabs.d.ts.map +1 -0
- package/dist/components/tabs.js +49 -0
- package/dist/components/tabs.js.map +1 -0
- package/dist/components/textarea.d.ts +4 -0
- package/dist/components/textarea.d.ts.map +1 -0
- package/dist/components/textarea.js +7 -0
- package/dist/components/textarea.js.map +1 -0
- package/dist/index.d.ts +30 -0
- package/dist/index.d.ts.map +1 -0
- package/dist/index.js +30 -0
- package/dist/index.js.map +1 -0
- package/dist/lib/utils.d.ts +3 -0
- package/dist/lib/utils.d.ts.map +1 -0
- package/dist/lib/utils.js +6 -0
- package/dist/lib/utils.js.map +1 -0
- package/dist/styles/globals.css +660 -0
- package/dist/styles/themes/ods-default.css +130 -0
- package/package.json +88 -0
|
@@ -0,0 +1,100 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
+
import * as React from "react";
|
|
4
|
+
import { ArrowDown, ArrowUp, ArrowUpDown, ChevronLeft, ChevronRight, Search, } from "lucide-react";
|
|
5
|
+
import { columnFilteringFeature, createFilteredRowModel, createPaginatedRowModel, createSortedRowModel, globalFilteringFeature, rowPaginationFeature, rowSelectionFeature, rowSortingFeature, sortFn_alphanumeric, sortFn_basic, sortFn_datetime, sortFn_text, tableFeatures, useTable, } from "@tanstack/react-table";
|
|
6
|
+
import { Button } from "@akbarsafari00/ods-react/components/button";
|
|
7
|
+
import { Checkbox } from "@akbarsafari00/ods-react/components/checkbox";
|
|
8
|
+
import { Input } from "@akbarsafari00/ods-react/components/input";
|
|
9
|
+
import { Table, TableBody, TableCaption, TableCell, TableFrame, TableHead, TableHeader, TableRow, } from "@akbarsafari00/ods-react/components/table";
|
|
10
|
+
import { cn } from "@akbarsafari00/ods-react/lib/utils";
|
|
11
|
+
const dataTableFeatures = tableFeatures({
|
|
12
|
+
columnFilteringFeature,
|
|
13
|
+
globalFilteringFeature,
|
|
14
|
+
filteredRowModel: createFilteredRowModel(),
|
|
15
|
+
rowSortingFeature,
|
|
16
|
+
sortedRowModel: createSortedRowModel(),
|
|
17
|
+
sortFns: {
|
|
18
|
+
alphanumeric: sortFn_alphanumeric,
|
|
19
|
+
basic: sortFn_basic,
|
|
20
|
+
datetime: sortFn_datetime,
|
|
21
|
+
text: sortFn_text,
|
|
22
|
+
},
|
|
23
|
+
rowPaginationFeature,
|
|
24
|
+
paginatedRowModel: createPaginatedRowModel(),
|
|
25
|
+
rowSelectionFeature,
|
|
26
|
+
});
|
|
27
|
+
const defaultLabels = {
|
|
28
|
+
search: "Search table",
|
|
29
|
+
searchPlaceholder: "Search…",
|
|
30
|
+
selectAllPageRows: "Select all rows on this page",
|
|
31
|
+
selectRow: (rowLabel) => `Select ${rowLabel}`,
|
|
32
|
+
selectedCount: (selected, total) => `${selected} of ${total} rows selected`,
|
|
33
|
+
resultCount: (visible, total) => `${visible} of ${total} rows`,
|
|
34
|
+
page: (current, total) => `Page ${current} of ${total}`,
|
|
35
|
+
previousPage: "Previous page",
|
|
36
|
+
nextPage: "Next page",
|
|
37
|
+
loading: "Loading table data",
|
|
38
|
+
emptyTitle: "No data yet",
|
|
39
|
+
emptyDescription: "Data will appear here when it becomes available.",
|
|
40
|
+
noResultsTitle: "No matching results",
|
|
41
|
+
noResultsDescription: "Try a different search term.",
|
|
42
|
+
errorTitle: "Table data could not be loaded",
|
|
43
|
+
};
|
|
44
|
+
function DataTable({ data, columns, caption, description, className, density = "comfortable", pageSize = 10, searchable = true, selectable = false, loading = false, error, retryAction, toolbar, labels: labelOverrides, getRowId, getRowLabel = (_, index) => `row ${index + 1}`, }) {
|
|
45
|
+
const labels = React.useMemo(() => ({ ...defaultLabels, ...labelOverrides }), [labelOverrides]);
|
|
46
|
+
const searchId = React.useId();
|
|
47
|
+
const descriptionId = React.useId();
|
|
48
|
+
const [query, setQuery] = React.useState("");
|
|
49
|
+
const table = useTable({
|
|
50
|
+
features: dataTableFeatures,
|
|
51
|
+
data,
|
|
52
|
+
columns,
|
|
53
|
+
getRowId,
|
|
54
|
+
enableRowSelection: selectable,
|
|
55
|
+
initialState: {
|
|
56
|
+
pagination: { pageIndex: 0, pageSize },
|
|
57
|
+
},
|
|
58
|
+
});
|
|
59
|
+
const rows = table.getRowModel().rows;
|
|
60
|
+
const filteredRows = table.getFilteredRowModel().rows;
|
|
61
|
+
const totalRows = data.length;
|
|
62
|
+
const selectedRows = table.getFilteredSelectedRowModel().rows.length;
|
|
63
|
+
const pageCount = Math.max(1, table.getPageCount());
|
|
64
|
+
const currentPage = Math.min(pageCount, table.state.pagination.pageIndex + 1);
|
|
65
|
+
const visibleColumnCount = columns.length + (selectable ? 1 : 0);
|
|
66
|
+
const hasQuery = query.trim().length > 0;
|
|
67
|
+
return (_jsxs("section", { "data-slot": "data-table", "data-density": density, className: cn("grid min-w-0 gap-3", className), "aria-describedby": description ? descriptionId : undefined, children: [_jsxs("div", { className: "flex min-w-0 flex-col gap-3 sm:flex-row sm:items-end sm:justify-between", children: [_jsxs("div", { className: "min-w-0", children: [_jsx("h3", { className: "font-semibold text-foreground", children: caption }), description ? (_jsx("p", { id: descriptionId, className: "mt-1 text-sm text-muted-foreground", children: description })) : null] }), searchable || toolbar ? (_jsxs("div", { "data-slot": "data-table-toolbar", className: "flex min-w-0 flex-col-reverse gap-2 sm:flex-row sm:items-center", children: [toolbar, searchable ? (_jsxs("div", { className: "relative min-w-0 sm:w-64", children: [_jsx("label", { htmlFor: searchId, className: "sr-only", children: labels.search }), _jsx(Search, { "aria-hidden": "true", className: "pointer-events-none absolute start-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" }), _jsx(Input, { id: searchId, type: "search", value: query, placeholder: labels.searchPlaceholder, className: "ps-9", onChange: (event) => {
|
|
68
|
+
const value = event.currentTarget.value;
|
|
69
|
+
setQuery(value);
|
|
70
|
+
table.setGlobalFilter(value);
|
|
71
|
+
table.setPageIndex(0);
|
|
72
|
+
} })] })) : null] })) : null] }), _jsx(TableFrame, { density: density, "aria-busy": loading || undefined, children: _jsxs(Table, { children: [_jsx(TableCaption, { children: caption }), _jsx(TableHeader, { children: table.getHeaderGroups().map((headerGroup) => (_jsxs(TableRow, { className: "hover:bg-transparent", children: [selectable ? (_jsx(TableHead, { className: "w-12", align: "center", children: _jsx(Checkbox, { checked: table.getIsAllPageRowsSelected()
|
|
73
|
+
? true
|
|
74
|
+
: table.getIsSomePageRowsSelected()
|
|
75
|
+
? "indeterminate"
|
|
76
|
+
: false, "aria-label": labels.selectAllPageRows, onCheckedChange: (checked) => table.toggleAllPageRowsSelected(Boolean(checked)) }) })) : null, headerGroup.headers.map((header) => {
|
|
77
|
+
const sorting = header.column.getIsSorted();
|
|
78
|
+
const canSort = header.column.getCanSort();
|
|
79
|
+
return (_jsx(TableHead, { "aria-sort": sorting === "asc"
|
|
80
|
+
? "ascending"
|
|
81
|
+
: sorting === "desc"
|
|
82
|
+
? "descending"
|
|
83
|
+
: canSort
|
|
84
|
+
? "none"
|
|
85
|
+
: undefined, children: header.isPlaceholder ? null : canSort ? (_jsxs("button", { type: "button", "data-slot": "data-table-sort", className: "-mx-2 inline-flex min-h-9 max-w-full items-center gap-1.5 rounded-[var(--ods-radius-control)] px-2 text-start font-[inherit] text-[inherit] outline-none hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring", onClick: header.column.getToggleSortingHandler(), children: [_jsx("span", { className: "truncate", children: _jsx(table.FlexRender, { header: header }) }), sorting === "asc" ? (_jsx(ArrowUp, { "aria-hidden": "true", className: "size-3.5 shrink-0" })) : sorting === "desc" ? (_jsx(ArrowDown, { "aria-hidden": "true", className: "size-3.5 shrink-0" })) : (_jsx(ArrowUpDown, { "aria-hidden": "true", className: "size-3.5 shrink-0 opacity-55" }))] })) : (_jsx(table.FlexRender, { header: header })) }, header.id));
|
|
86
|
+
})] }, headerGroup.id))) }), _jsx(TableBody, { children: loading || error || rows.length === 0 ? (_jsx(TableRow, { className: "hover:bg-transparent", children: _jsx(TableCell, { colSpan: visibleColumnCount, className: "h-48 text-center", children: _jsxs("div", { role: loading ? "status" : error ? "alert" : undefined, className: "mx-auto grid max-w-sm justify-items-center gap-2 py-8", children: [_jsx("p", { className: "font-medium", children: loading
|
|
87
|
+
? labels.loading
|
|
88
|
+
: error
|
|
89
|
+
? labels.errorTitle
|
|
90
|
+
: hasQuery
|
|
91
|
+
? labels.noResultsTitle
|
|
92
|
+
: labels.emptyTitle }), !loading ? (_jsx("p", { className: "text-sm text-muted-foreground", children: error ||
|
|
93
|
+
(hasQuery
|
|
94
|
+
? labels.noResultsDescription
|
|
95
|
+
: labels.emptyDescription) })) : null, error ? retryAction : null] }) }) })) : (rows.map((row, rowIndex) => (_jsxs(TableRow, { "data-state": row.getIsSelected() ? "selected" : undefined, children: [selectable ? (_jsx(TableCell, { className: "w-12", align: "center", children: _jsx(Checkbox, { checked: row.getIsSelected(), "aria-label": labels.selectRow(getRowLabel(row.original, rowIndex)), onCheckedChange: (checked) => row.toggleSelected(Boolean(checked)) }) })) : null, row.getAllCells().map((cell) => (_jsx(TableCell, { children: _jsx(table.FlexRender, { cell: cell }) }, cell.id)))] }, row.id)))) })] }) }), _jsxs("div", { className: "flex min-w-0 flex-col gap-3 text-sm sm:flex-row sm:items-center sm:justify-between", children: [_jsx("p", { className: "text-muted-foreground", "aria-live": "polite", children: selectable && selectedRows > 0
|
|
96
|
+
? labels.selectedCount(selectedRows, filteredRows.length)
|
|
97
|
+
: labels.resultCount(filteredRows.length, totalRows) }), _jsxs("div", { className: "flex items-center gap-2 self-end sm:self-auto", children: [_jsx("span", { className: "font-medium whitespace-nowrap", "aria-live": "polite", children: labels.page(currentPage, pageCount) }), _jsx(Button, { variant: "neutral", className: "min-h-9 min-w-9 px-2", disabled: !table.getCanPreviousPage() || loading, "aria-label": labels.previousPage, onClick: () => table.previousPage(), children: _jsx(ChevronLeft, { "data-slot": "data-table-direction-icon", "aria-hidden": "true" }) }), _jsx(Button, { variant: "neutral", className: "min-h-9 min-w-9 px-2", disabled: !table.getCanNextPage() || loading, "aria-label": labels.nextPage, onClick: () => table.nextPage(), children: _jsx(ChevronRight, { "data-slot": "data-table-direction-icon", "aria-hidden": "true" }) })] })] })] }));
|
|
98
|
+
}
|
|
99
|
+
export { DataTable };
|
|
100
|
+
//# sourceMappingURL=data-table.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"data-table.js","sourceRoot":"","sources":["../../src/components/data-table.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
type DialogProps = {
|
|
3
|
+
children?: React.ReactNode;
|
|
4
|
+
open?: boolean;
|
|
5
|
+
defaultOpen?: boolean;
|
|
6
|
+
onOpenChange?: (open: boolean) => void;
|
|
7
|
+
};
|
|
8
|
+
type DialogTriggerProps = React.ComponentProps<"button">;
|
|
9
|
+
type DialogCloseProps = React.ComponentProps<"button">;
|
|
10
|
+
type DialogPartProps = React.ComponentProps<"div">;
|
|
11
|
+
type DialogTitleProps = React.ComponentProps<"h2">;
|
|
12
|
+
type DialogDescriptionProps = React.ComponentProps<"p">;
|
|
13
|
+
type DialogSize = "compact" | "standard" | "wide";
|
|
14
|
+
type DialogContentProps = DialogPartProps & {
|
|
15
|
+
dismissible?: boolean;
|
|
16
|
+
showCloseButton?: boolean;
|
|
17
|
+
showHandle?: boolean;
|
|
18
|
+
closeLabel?: string;
|
|
19
|
+
size?: DialogSize;
|
|
20
|
+
};
|
|
21
|
+
declare function Dialog(props: DialogProps): import("react/jsx-runtime").JSX.Element;
|
|
22
|
+
declare function DialogTrigger({ className, type, ...props }: DialogTriggerProps): import("react/jsx-runtime").JSX.Element;
|
|
23
|
+
declare function DialogClose({ className, type, ...props }: DialogCloseProps): import("react/jsx-runtime").JSX.Element;
|
|
24
|
+
declare function DialogContent({ className, children, dismissible, showCloseButton, showHandle, closeLabel, size, ...props }: DialogContentProps): import("react/jsx-runtime").JSX.Element;
|
|
25
|
+
declare function DialogHeader({ className, ...props }: DialogPartProps): import("react/jsx-runtime").JSX.Element;
|
|
26
|
+
declare function DialogBody({ className, ...props }: DialogPartProps): import("react/jsx-runtime").JSX.Element;
|
|
27
|
+
declare function DialogFooter({ className, ...props }: DialogPartProps): import("react/jsx-runtime").JSX.Element;
|
|
28
|
+
declare function DialogTitle({ className, ...props }: DialogTitleProps): import("react/jsx-runtime").JSX.Element;
|
|
29
|
+
declare function DialogDescription({ className, ...props }: DialogDescriptionProps): import("react/jsx-runtime").JSX.Element;
|
|
30
|
+
export { Dialog, DialogBody, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, };
|
|
31
|
+
export type { DialogContentProps, DialogProps, DialogSize };
|
|
32
|
+
//# sourceMappingURL=dialog.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"dialog.d.ts","sourceRoot":"","sources":["../../src/components/dialog.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAM9B,KAAK,WAAW,GAAG;IACjB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;CACvC,CAAA;AAED,KAAK,kBAAkB,GAAG,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,CAAA;AACxD,KAAK,gBAAgB,GAAG,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,CAAA;AACtD,KAAK,eAAe,GAAG,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,CAAA;AAClD,KAAK,gBAAgB,GAAG,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,CAAA;AAClD,KAAK,sBAAsB,GAAG,KAAK,CAAC,cAAc,CAAC,GAAG,CAAC,CAAA;AACvD,KAAK,UAAU,GAAG,SAAS,GAAG,UAAU,GAAG,MAAM,CAAA;AAEjD,KAAK,kBAAkB,GAAG,eAAe,GAAG;IAC1C,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,IAAI,CAAC,EAAE,UAAU,CAAA;CAClB,CAAA;AAED,iBAAS,MAAM,CAAC,KAAK,EAAE,WAAW,2CAEjC;AAED,iBAAS,aAAa,CAAC,EACrB,SAAS,EACT,IAAe,EACf,GAAG,KAAK,EACT,EAAE,kBAAkB,2CAYpB;AAED,iBAAS,WAAW,CAAC,EACnB,SAAS,EACT,IAAe,EACf,GAAG,KAAK,EACT,EAAE,gBAAgB,2CAYlB;AAeD,iBAAS,aAAa,CAAC,EACrB,SAAS,EACT,QAAQ,EACR,WAAkB,EAClB,eAAsB,EACtB,UAAiB,EACjB,UAA2B,EAC3B,IAAiB,EACjB,GAAG,KAAK,EACT,EAAE,kBAAkB,2CAoCpB;AAED,iBAAS,YAAY,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,eAAe,2CAW7D;AAED,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,eAAe,2CAW3D;AAED,iBAAS,YAAY,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,eAAe,2CAW7D;AAED,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,2CAQ7D;AAED,iBAAS,iBAAiB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,sBAAsB,2CAQzE;AAED,OAAO,EACL,MAAM,EACN,UAAU,EACV,WAAW,EACX,aAAa,EACb,iBAAiB,EACjB,YAAY,EACZ,YAAY,EACZ,WAAW,EACX,aAAa,GACd,CAAA;AACD,YAAY,EAAE,kBAAkB,EAAE,WAAW,EAAE,UAAU,EAAE,CAAA"}
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
+
import { X } from "lucide-react";
|
|
4
|
+
import { Dialog as DialogPrimitive } from "radix-ui";
|
|
5
|
+
import { cn } from "@akbarsafari00/ods-react/lib/utils";
|
|
6
|
+
function Dialog(props) {
|
|
7
|
+
return _jsx(DialogPrimitive.Root, { modal: true, ...props });
|
|
8
|
+
}
|
|
9
|
+
function DialogTrigger({ className, type = "button", ...props }) {
|
|
10
|
+
return (_jsx(DialogPrimitive.Trigger, { ...props, type: type, "data-slot": "dialog-trigger", className: cn("inline-flex min-h-10 items-center justify-center gap-2 rounded-[4px] border bg-background px-3 text-sm font-medium transition-colors outline-none hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:bg-muted disabled:text-muted-foreground in-data-[density=compact]:min-h-8", className) }));
|
|
11
|
+
}
|
|
12
|
+
function DialogClose({ className, type = "button", ...props }) {
|
|
13
|
+
return (_jsx(DialogPrimitive.Close, { ...props, type: type, "data-slot": "dialog-close", className: cn("inline-flex min-h-10 items-center justify-center gap-2 rounded-[4px] border bg-background px-3 text-sm font-medium transition-colors outline-none hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:bg-muted disabled:text-muted-foreground in-data-[density=compact]:min-h-8", className) }));
|
|
14
|
+
}
|
|
15
|
+
function DialogOverlay({ className, ...props }) {
|
|
16
|
+
return (_jsx(DialogPrimitive.Overlay, { ...props, "data-slot": "dialog-overlay", className: cn("fixed inset-0 z-[var(--ods-layer-scrim)] bg-foreground/40 backdrop-blur-[1px] transition-opacity duration-[var(--ods-motion-duration-exit)] ease-[var(--ods-motion-easing-exit)] data-[state=closed]:opacity-0 data-[state=open]:opacity-100 data-[state=open]:duration-[var(--ods-motion-duration-enter)] data-[state=open]:ease-[var(--ods-motion-easing-enter)]", className) }));
|
|
17
|
+
}
|
|
18
|
+
function DialogContent({ className, children, dismissible = true, showCloseButton = true, showHandle = true, closeLabel = "Close dialog", size = "standard", ...props }) {
|
|
19
|
+
return (_jsxs(DialogPrimitive.Portal, { children: [_jsx(DialogOverlay, {}), _jsxs(DialogPrimitive.Content, { ...props, "data-slot": "dialog-content", "data-size": size, "data-dismissible": dismissible, className: cn("fixed z-[var(--ods-layer-modal)] grid max-h-[calc(100dvh-0.5rem)] grid-rows-[auto_minmax(0,1fr)_auto] gap-0 overflow-hidden border bg-surface-raised text-foreground shadow-2xl outline-none sm:max-h-[calc(100dvh-2rem)]", className), onEscapeKeyDown: (event) => {
|
|
20
|
+
if (!dismissible)
|
|
21
|
+
event.preventDefault();
|
|
22
|
+
}, onPointerDownOutside: (event) => {
|
|
23
|
+
if (!dismissible)
|
|
24
|
+
event.preventDefault();
|
|
25
|
+
}, children: [showHandle ? (_jsx("span", { "data-slot": "dialog-handle", "aria-hidden": "true" })) : null, children, showCloseButton ? (_jsx(DialogPrimitive.Close, { "data-slot": "dialog-close-icon", className: "absolute end-3 top-3 inline-flex size-8 items-center justify-center rounded-[4px] text-muted-foreground transition-colors outline-none hover:bg-muted hover:text-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50", "aria-label": closeLabel, children: _jsx(X, { "aria-hidden": "true", className: "size-4" }) })) : null] })] }));
|
|
26
|
+
}
|
|
27
|
+
function DialogHeader({ className, ...props }) {
|
|
28
|
+
return (_jsx("div", { "data-slot": "dialog-header", className: cn("row-start-1 grid gap-1.5 border-b px-4 pe-12 pt-6 pb-4 in-data-[density=compact]:px-3 in-data-[density=compact]:pt-5 in-data-[density=compact]:pb-3 sm:pt-4 sm:in-data-[density=compact]:pt-3", className), ...props }));
|
|
29
|
+
}
|
|
30
|
+
function DialogBody({ className, ...props }) {
|
|
31
|
+
return (_jsx("div", { "data-slot": "dialog-body", className: cn("row-start-2 min-h-0 overflow-y-auto overscroll-contain p-4 in-data-[density=compact]:p-3", className), ...props }));
|
|
32
|
+
}
|
|
33
|
+
function DialogFooter({ className, ...props }) {
|
|
34
|
+
return (_jsx("div", { "data-slot": "dialog-footer", className: cn("row-start-3 flex flex-col-reverse gap-2 border-t bg-surface-raised px-4 pt-3 pb-[max(0.75rem,env(safe-area-inset-bottom))] in-data-[density=compact]:px-3 in-data-[density=compact]:pt-2 in-data-[density=compact]:pb-[max(0.5rem,env(safe-area-inset-bottom))] sm:flex-row sm:justify-end sm:pb-3 sm:in-data-[density=compact]:pb-2", className), ...props }));
|
|
35
|
+
}
|
|
36
|
+
function DialogTitle({ className, ...props }) {
|
|
37
|
+
return (_jsx(DialogPrimitive.Title, { "data-slot": "dialog-title", className: cn("text-base leading-6 font-semibold", className), ...props }));
|
|
38
|
+
}
|
|
39
|
+
function DialogDescription({ className, ...props }) {
|
|
40
|
+
return (_jsx(DialogPrimitive.Description, { "data-slot": "dialog-description", className: cn("text-sm leading-6 text-muted-foreground", className), ...props }));
|
|
41
|
+
}
|
|
42
|
+
export { Dialog, DialogBody, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, };
|
|
43
|
+
//# sourceMappingURL=dialog.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"dialog.js","sourceRoot":"","sources":["../../src/components/dialog.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
type DrawerProps = {
|
|
3
|
+
children?: React.ReactNode;
|
|
4
|
+
open?: boolean;
|
|
5
|
+
defaultOpen?: boolean;
|
|
6
|
+
onOpenChange?: (open: boolean) => void;
|
|
7
|
+
};
|
|
8
|
+
type DrawerTriggerProps = React.ComponentProps<"button">;
|
|
9
|
+
type DrawerCloseProps = React.ComponentProps<"button">;
|
|
10
|
+
type DrawerPartProps = React.ComponentProps<"div">;
|
|
11
|
+
type DrawerTitleProps = React.ComponentProps<"h2">;
|
|
12
|
+
type DrawerDescriptionProps = React.ComponentProps<"p">;
|
|
13
|
+
type DrawerWidth = "narrow" | "medium" | "wide";
|
|
14
|
+
type DrawerContentProps = DrawerPartProps & {
|
|
15
|
+
side?: "start" | "end";
|
|
16
|
+
width?: DrawerWidth;
|
|
17
|
+
dismissible?: boolean;
|
|
18
|
+
showCloseButton?: boolean;
|
|
19
|
+
closeLabel?: string;
|
|
20
|
+
};
|
|
21
|
+
declare function Drawer(props: DrawerProps): import("react/jsx-runtime").JSX.Element;
|
|
22
|
+
declare function DrawerTrigger({ className, type, ...props }: DrawerTriggerProps): import("react/jsx-runtime").JSX.Element;
|
|
23
|
+
declare function DrawerClose({ className, type, ...props }: DrawerCloseProps): import("react/jsx-runtime").JSX.Element;
|
|
24
|
+
declare function DrawerContent({ className, children, side, width, dismissible, showCloseButton, closeLabel, ...props }: DrawerContentProps): import("react/jsx-runtime").JSX.Element;
|
|
25
|
+
declare function DrawerHeader({ className, ...props }: DrawerPartProps): import("react/jsx-runtime").JSX.Element;
|
|
26
|
+
declare function DrawerBody({ className, ...props }: DrawerPartProps): import("react/jsx-runtime").JSX.Element;
|
|
27
|
+
declare function DrawerFooter({ className, ...props }: DrawerPartProps): import("react/jsx-runtime").JSX.Element;
|
|
28
|
+
declare function DrawerTitle({ className, ...props }: DrawerTitleProps): import("react/jsx-runtime").JSX.Element;
|
|
29
|
+
declare function DrawerDescription({ className, ...props }: DrawerDescriptionProps): import("react/jsx-runtime").JSX.Element;
|
|
30
|
+
export { Drawer, DrawerBody, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerTitle, DrawerTrigger, };
|
|
31
|
+
export type { DrawerContentProps, DrawerProps, DrawerWidth };
|
|
32
|
+
//# sourceMappingURL=drawer.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"drawer.d.ts","sourceRoot":"","sources":["../../src/components/drawer.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAM9B,KAAK,WAAW,GAAG;IACjB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;CACvC,CAAA;AAED,KAAK,kBAAkB,GAAG,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,CAAA;AACxD,KAAK,gBAAgB,GAAG,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,CAAA;AACtD,KAAK,eAAe,GAAG,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,CAAA;AAClD,KAAK,gBAAgB,GAAG,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,CAAA;AAClD,KAAK,sBAAsB,GAAG,KAAK,CAAC,cAAc,CAAC,GAAG,CAAC,CAAA;AACvD,KAAK,WAAW,GAAG,QAAQ,GAAG,QAAQ,GAAG,MAAM,CAAA;AAE/C,KAAK,kBAAkB,GAAG,eAAe,GAAG;IAC1C,IAAI,CAAC,EAAE,OAAO,GAAG,KAAK,CAAA;IACtB,KAAK,CAAC,EAAE,WAAW,CAAA;IACnB,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,UAAU,CAAC,EAAE,MAAM,CAAA;CACpB,CAAA;AAED,iBAAS,MAAM,CAAC,KAAK,EAAE,WAAW,2CAEjC;AAED,iBAAS,aAAa,CAAC,EACrB,SAAS,EACT,IAAe,EACf,GAAG,KAAK,EACT,EAAE,kBAAkB,2CAYpB;AAED,iBAAS,WAAW,CAAC,EACnB,SAAS,EACT,IAAe,EACf,GAAG,KAAK,EACT,EAAE,gBAAgB,2CAYlB;AAeD,iBAAS,aAAa,CAAC,EACrB,SAAS,EACT,QAAQ,EACR,IAAY,EACZ,KAAgB,EAChB,WAAkB,EAClB,eAAsB,EACtB,UAA2B,EAC3B,GAAG,KAAK,EACT,EAAE,kBAAkB,2CAkCpB;AAED,iBAAS,YAAY,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,eAAe,2CAW7D;AAED,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,eAAe,2CAW3D;AAED,iBAAS,YAAY,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,eAAe,2CAW7D;AAED,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,2CAQ7D;AAED,iBAAS,iBAAiB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,sBAAsB,2CAQzE;AAED,OAAO,EACL,MAAM,EACN,UAAU,EACV,WAAW,EACX,aAAa,EACb,iBAAiB,EACjB,YAAY,EACZ,YAAY,EACZ,WAAW,EACX,aAAa,GACd,CAAA;AACD,YAAY,EAAE,kBAAkB,EAAE,WAAW,EAAE,WAAW,EAAE,CAAA"}
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
+
import { X } from "lucide-react";
|
|
4
|
+
import { Dialog as DialogPrimitive } from "radix-ui";
|
|
5
|
+
import { cn } from "@akbarsafari00/ods-react/lib/utils";
|
|
6
|
+
function Drawer(props) {
|
|
7
|
+
return _jsx(DialogPrimitive.Root, { modal: true, ...props });
|
|
8
|
+
}
|
|
9
|
+
function DrawerTrigger({ className, type = "button", ...props }) {
|
|
10
|
+
return (_jsx(DialogPrimitive.Trigger, { ...props, type: type, "data-slot": "drawer-trigger", className: cn("inline-flex min-h-10 items-center justify-center gap-2 rounded-[4px] border bg-background px-3 text-sm font-medium transition-colors outline-none hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:bg-muted disabled:text-muted-foreground in-data-[density=compact]:min-h-8", className) }));
|
|
11
|
+
}
|
|
12
|
+
function DrawerClose({ className, type = "button", ...props }) {
|
|
13
|
+
return (_jsx(DialogPrimitive.Close, { ...props, type: type, "data-slot": "drawer-close", className: cn("inline-flex min-h-10 items-center justify-center gap-2 rounded-[4px] border bg-background px-3 text-sm font-medium transition-colors outline-none hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:bg-muted disabled:text-muted-foreground in-data-[density=compact]:min-h-8", className) }));
|
|
14
|
+
}
|
|
15
|
+
function DrawerOverlay({ className, ...props }) {
|
|
16
|
+
return (_jsx(DialogPrimitive.Overlay, { ...props, "data-slot": "drawer-overlay", className: cn("fixed inset-0 z-[var(--ods-layer-scrim)] bg-foreground/40 backdrop-blur-[1px] transition-opacity duration-[var(--ods-motion-duration-exit)] ease-[var(--ods-motion-easing-exit)] data-[state=closed]:opacity-0 data-[state=open]:opacity-100 data-[state=open]:duration-[var(--ods-motion-duration-enter)] data-[state=open]:ease-[var(--ods-motion-easing-enter)]", className) }));
|
|
17
|
+
}
|
|
18
|
+
function DrawerContent({ className, children, side = "end", width = "medium", dismissible = true, showCloseButton = true, closeLabel = "Close drawer", ...props }) {
|
|
19
|
+
return (_jsxs(DialogPrimitive.Portal, { children: [_jsx(DrawerOverlay, {}), _jsxs(DialogPrimitive.Content, { ...props, "data-slot": "drawer-content", "data-side": side, "data-width": width, "data-dismissible": dismissible, className: cn("fixed z-[var(--ods-layer-modal)] grid h-dvh max-h-dvh grid-rows-[auto_minmax(0,1fr)_auto] overflow-hidden bg-surface-raised text-foreground shadow-2xl outline-none", className), onEscapeKeyDown: (event) => {
|
|
20
|
+
if (!dismissible)
|
|
21
|
+
event.preventDefault();
|
|
22
|
+
}, onPointerDownOutside: (event) => {
|
|
23
|
+
if (!dismissible)
|
|
24
|
+
event.preventDefault();
|
|
25
|
+
}, children: [children, showCloseButton ? (_jsx(DialogPrimitive.Close, { "data-slot": "drawer-close-icon", className: "absolute end-3 top-[max(0.75rem,env(safe-area-inset-top))] inline-flex size-8 items-center justify-center rounded-[4px] text-muted-foreground transition-colors outline-none hover:bg-muted hover:text-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50", "aria-label": closeLabel, children: _jsx(X, { "aria-hidden": "true", className: "size-4" }) })) : null] })] }));
|
|
26
|
+
}
|
|
27
|
+
function DrawerHeader({ className, ...props }) {
|
|
28
|
+
return (_jsx("div", { "data-slot": "drawer-header", className: cn("row-start-1 grid shrink-0 gap-1.5 border-b px-4 pe-12 pt-[max(1rem,env(safe-area-inset-top))] pb-4 in-data-[density=compact]:px-3 in-data-[density=compact]:pt-[max(0.75rem,env(safe-area-inset-top))] in-data-[density=compact]:pb-3", className), ...props }));
|
|
29
|
+
}
|
|
30
|
+
function DrawerBody({ className, ...props }) {
|
|
31
|
+
return (_jsx("div", { "data-slot": "drawer-body", className: cn("row-start-2 min-h-0 overflow-y-auto overscroll-contain p-4 in-data-[density=compact]:p-3", className), ...props }));
|
|
32
|
+
}
|
|
33
|
+
function DrawerFooter({ className, ...props }) {
|
|
34
|
+
return (_jsx("div", { "data-slot": "drawer-footer", className: cn("row-start-3 flex shrink-0 flex-col-reverse gap-2 border-t bg-surface-raised px-4 pt-3 pb-[max(0.75rem,env(safe-area-inset-bottom))] in-data-[density=compact]:px-3 in-data-[density=compact]:pt-2 in-data-[density=compact]:pb-[max(0.5rem,env(safe-area-inset-bottom))] sm:flex-row sm:justify-end sm:pb-3 sm:in-data-[density=compact]:pb-2", className), ...props }));
|
|
35
|
+
}
|
|
36
|
+
function DrawerTitle({ className, ...props }) {
|
|
37
|
+
return (_jsx(DialogPrimitive.Title, { "data-slot": "drawer-title", className: cn("text-base leading-6 font-semibold", className), ...props }));
|
|
38
|
+
}
|
|
39
|
+
function DrawerDescription({ className, ...props }) {
|
|
40
|
+
return (_jsx(DialogPrimitive.Description, { "data-slot": "drawer-description", className: cn("text-sm leading-6 text-muted-foreground", className), ...props }));
|
|
41
|
+
}
|
|
42
|
+
export { Drawer, DrawerBody, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerTitle, DrawerTrigger, };
|
|
43
|
+
//# sourceMappingURL=drawer.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"drawer.js","sourceRoot":"","sources":["../../src/components/drawer.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import { type VariantProps } from "class-variance-authority";
|
|
3
|
+
import { Label } from "@akbarsafari00/ods-react/components/label";
|
|
4
|
+
type GovernedFieldsetProps = {
|
|
5
|
+
legend: React.ReactNode;
|
|
6
|
+
description?: React.ReactNode;
|
|
7
|
+
error?: React.ReactNode;
|
|
8
|
+
disabled?: boolean;
|
|
9
|
+
fieldsetId?: string;
|
|
10
|
+
children: React.ReactNode;
|
|
11
|
+
};
|
|
12
|
+
declare const FieldSet: React.ForwardRefExoticComponent<(GovernedFieldsetProps | Omit<React.DetailedHTMLProps<React.FieldsetHTMLAttributes<HTMLFieldSetElement>, HTMLFieldSetElement>, "ref">) & React.RefAttributes<HTMLFieldSetElement>>;
|
|
13
|
+
declare function FieldLegend({ className, variant, ...props }: React.ComponentProps<"legend"> & {
|
|
14
|
+
variant?: "legend" | "label";
|
|
15
|
+
}): import("react/jsx-runtime").JSX.Element;
|
|
16
|
+
declare function FieldGroup({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
|
|
17
|
+
declare const fieldVariants: (props?: ({
|
|
18
|
+
orientation?: "horizontal" | "vertical" | "responsive" | null | undefined;
|
|
19
|
+
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
20
|
+
type FieldControlProps = {
|
|
21
|
+
id: string;
|
|
22
|
+
required?: true;
|
|
23
|
+
"aria-invalid"?: true;
|
|
24
|
+
"aria-describedby"?: string;
|
|
25
|
+
};
|
|
26
|
+
type GovernedFieldProps = {
|
|
27
|
+
label: React.ReactNode;
|
|
28
|
+
description?: React.ReactNode;
|
|
29
|
+
error?: React.ReactNode;
|
|
30
|
+
required?: boolean;
|
|
31
|
+
controlId?: string;
|
|
32
|
+
children: (controlProps: FieldControlProps) => React.ReactNode;
|
|
33
|
+
};
|
|
34
|
+
type LegacyFieldProps = React.ComponentPropsWithoutRef<"div"> & VariantProps<typeof fieldVariants>;
|
|
35
|
+
declare const Field: React.ForwardRefExoticComponent<(GovernedFieldProps | LegacyFieldProps) & React.RefAttributes<HTMLDivElement>>;
|
|
36
|
+
declare function FieldContent({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
|
|
37
|
+
declare function FieldLabel({ className, ...props }: React.ComponentProps<typeof Label>): import("react/jsx-runtime").JSX.Element;
|
|
38
|
+
declare function FieldTitle({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
|
|
39
|
+
declare function FieldDescription({ className, ...props }: React.ComponentProps<"p">): import("react/jsx-runtime").JSX.Element;
|
|
40
|
+
declare function FieldSeparator({ children, className, ...props }: React.ComponentProps<"div"> & {
|
|
41
|
+
children?: React.ReactNode;
|
|
42
|
+
}): import("react/jsx-runtime").JSX.Element;
|
|
43
|
+
declare function FieldError({ className, children, errors, ...props }: React.ComponentProps<"div"> & {
|
|
44
|
+
errors?: Array<{
|
|
45
|
+
message?: string;
|
|
46
|
+
} | undefined>;
|
|
47
|
+
}): import("react/jsx-runtime").JSX.Element | null;
|
|
48
|
+
export { Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle, };
|
|
49
|
+
export type { FieldControlProps, GovernedFieldProps, GovernedFieldsetProps };
|
|
50
|
+
//# sourceMappingURL=field.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"field.d.ts","sourceRoot":"","sources":["../../src/components/field.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,93 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import * as React from "react";
|
|
3
|
+
import { useMemo } from "react";
|
|
4
|
+
import { cva } from "class-variance-authority";
|
|
5
|
+
import { Label } from "@akbarsafari00/ods-react/components/label";
|
|
6
|
+
import { Separator } from "@akbarsafari00/ods-react/components/separator";
|
|
7
|
+
import { cn } from "@akbarsafari00/ods-react/lib/utils";
|
|
8
|
+
const FieldSet = React.forwardRef((props, ref) => {
|
|
9
|
+
const generatedId = React.useId();
|
|
10
|
+
if ("legend" in props) {
|
|
11
|
+
const { children, description, disabled, error, fieldsetId, legend } = props;
|
|
12
|
+
const rootId = fieldsetId ?? `ods-fieldset-${generatedId}`;
|
|
13
|
+
const descriptionId = description ? `${rootId}-description` : undefined;
|
|
14
|
+
const errorId = error ? `${rootId}-error` : undefined;
|
|
15
|
+
const describedBy = [descriptionId, errorId].filter(Boolean).join(" ");
|
|
16
|
+
return (_jsxs("fieldset", { ref: ref, id: rootId, "data-slot": "field-set", disabled: disabled, "aria-describedby": describedBy || undefined, className: "flex flex-col gap-4", children: [_jsx("legend", { className: "mb-1.5 font-medium", children: legend }), _jsxs("div", { "data-slot": "field-set-body", className: "flex flex-col gap-4", children: [description ? (_jsx("p", { id: descriptionId, className: "text-sm text-muted-foreground", children: description })) : null, children, error ? (_jsx("p", { id: errorId, className: "text-sm text-destructive", children: error })) : null] })] }));
|
|
17
|
+
}
|
|
18
|
+
const { className, ...legacyProps } = props;
|
|
19
|
+
return (_jsx("fieldset", { ref: ref, "data-slot": "field-set", className: cn("flex flex-col gap-4 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3", className), ...legacyProps }));
|
|
20
|
+
});
|
|
21
|
+
FieldSet.displayName = "FieldSet";
|
|
22
|
+
function FieldLegend({ className, variant = "legend", ...props }) {
|
|
23
|
+
return (_jsx("legend", { "data-slot": "field-legend", "data-variant": variant, className: cn("mb-1.5 font-medium data-[variant=label]:text-sm data-[variant=legend]:text-base", className), ...props }));
|
|
24
|
+
}
|
|
25
|
+
function FieldGroup({ className, ...props }) {
|
|
26
|
+
return (_jsx("div", { "data-slot": "field-group", className: cn("group/field-group @container/field-group flex w-full flex-col gap-5 data-[slot=checkbox-group]:gap-3 *:data-[slot=field-group]:gap-4", className), ...props }));
|
|
27
|
+
}
|
|
28
|
+
const fieldVariants = cva("group/field flex w-full gap-2 data-[invalid=true]:text-destructive", {
|
|
29
|
+
variants: {
|
|
30
|
+
orientation: {
|
|
31
|
+
vertical: "flex-col *:w-full [&>.sr-only]:w-auto",
|
|
32
|
+
horizontal: "flex-row items-center has-[>[data-slot=field-content]]:items-start *:data-[slot=field-label]:flex-auto has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
|
|
33
|
+
responsive: "flex-col *:w-full @md/field-group:flex-row @md/field-group:items-center @md/field-group:*:w-auto @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:*:data-[slot=field-label]:flex-auto [&>.sr-only]:w-auto @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
|
|
34
|
+
},
|
|
35
|
+
},
|
|
36
|
+
defaultVariants: {
|
|
37
|
+
orientation: "vertical",
|
|
38
|
+
},
|
|
39
|
+
});
|
|
40
|
+
const Field = React.forwardRef((props, ref) => {
|
|
41
|
+
const generatedId = React.useId();
|
|
42
|
+
if ("label" in props) {
|
|
43
|
+
const { children, controlId, description, error, label, required } = props;
|
|
44
|
+
const id = controlId ?? `ods-field-${generatedId}`;
|
|
45
|
+
const descriptionId = description ? `${id}-description` : undefined;
|
|
46
|
+
const errorId = error ? `${id}-error` : undefined;
|
|
47
|
+
const describedBy = [descriptionId, errorId].filter(Boolean).join(" ");
|
|
48
|
+
const controlProps = {
|
|
49
|
+
id,
|
|
50
|
+
...(required ? { required: true } : {}),
|
|
51
|
+
...(error ? { "aria-invalid": true } : {}),
|
|
52
|
+
...(describedBy ? { "aria-describedby": describedBy } : {}),
|
|
53
|
+
};
|
|
54
|
+
return (_jsxs("div", { ref: ref, "data-slot": "field", "data-invalid": error ? "true" : undefined, className: "flex w-full flex-col gap-2", children: [_jsxs("label", { htmlFor: id, className: "w-fit text-sm leading-snug font-medium", children: [label, required ? (_jsx("span", { className: "ms-1 text-destructive", "aria-hidden": "true", children: "*" })) : null] }), description ? (_jsx("p", { id: descriptionId, className: "text-sm text-muted-foreground", children: description })) : null, children(controlProps), error ? (_jsx("p", { id: errorId, className: "text-sm text-destructive", children: error })) : null] }));
|
|
55
|
+
}
|
|
56
|
+
const { className, orientation = "vertical", ...legacyProps } = props;
|
|
57
|
+
return (_jsx("div", { ref: ref, role: "group", "data-slot": "field", "data-orientation": orientation, className: cn(fieldVariants({ orientation }), className), ...legacyProps }));
|
|
58
|
+
});
|
|
59
|
+
Field.displayName = "Field";
|
|
60
|
+
function FieldContent({ className, ...props }) {
|
|
61
|
+
return (_jsx("div", { "data-slot": "field-content", className: cn("group/field-content flex flex-1 flex-col gap-0.5 leading-snug", className), ...props }));
|
|
62
|
+
}
|
|
63
|
+
function FieldLabel({ className, ...props }) {
|
|
64
|
+
return (_jsx(Label, { "data-slot": "field-label", className: cn("group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50 has-data-[state=checked]:border-primary/30 has-data-[state=checked]:bg-primary/5 has-[>[data-slot=field]]:rounded-lg has-[>[data-slot=field]]:border has-[>[data-slot=field]]:not-has-[:disabled,[data-disabled]]:hover:bg-muted/50 has-[>[data-slot=field]]:has-[:focus-visible]:border-ring has-[>[data-slot=field]]:has-[:focus-visible]:ring-3 has-[>[data-slot=field]]:has-[:focus-visible]:ring-ring/50 *:data-[slot=field]:p-2.5 dark:has-data-[state=checked]:border-primary/20 dark:has-data-[state=checked]:bg-primary/10", "has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col", className), ...props }));
|
|
65
|
+
}
|
|
66
|
+
function FieldTitle({ className, ...props }) {
|
|
67
|
+
return (_jsx("div", { "data-slot": "field-label", className: cn("flex w-fit items-center gap-2 text-sm font-medium group-data-[disabled=true]/field:opacity-50", className), ...props }));
|
|
68
|
+
}
|
|
69
|
+
function FieldDescription({ className, ...props }) {
|
|
70
|
+
return (_jsx("p", { "data-slot": "field-description", className: cn("text-start text-sm leading-normal font-normal text-muted-foreground group-has-data-horizontal/field:text-balance [[data-variant=legend]+&]:-mt-1.5", "last:mt-0 nth-last-2:-mt-1", "[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary", className), ...props }));
|
|
71
|
+
}
|
|
72
|
+
function FieldSeparator({ children, className, ...props }) {
|
|
73
|
+
return (_jsxs("div", { "data-slot": "field-separator", "data-content": !!children, className: cn("relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2", className), ...props, children: [_jsx(Separator, { className: "absolute inset-0 top-1/2" }), children && (_jsx("span", { className: "relative mx-auto block w-fit bg-background px-2 text-muted-foreground", "data-slot": "field-separator-content", children: children }))] }));
|
|
74
|
+
}
|
|
75
|
+
function FieldError({ className, children, errors, ...props }) {
|
|
76
|
+
const content = useMemo(() => {
|
|
77
|
+
if (children)
|
|
78
|
+
return children;
|
|
79
|
+
if (!errors?.length)
|
|
80
|
+
return null;
|
|
81
|
+
const uniqueErrors = [
|
|
82
|
+
...new Map(errors.map((error) => [error?.message, error])).values(),
|
|
83
|
+
];
|
|
84
|
+
if (uniqueErrors.length === 1)
|
|
85
|
+
return uniqueErrors[0]?.message;
|
|
86
|
+
return (_jsx("ul", { className: "ms-4 flex list-disc flex-col gap-1", children: uniqueErrors.map((error, index) => error?.message && _jsx("li", { children: error.message }, index)) }));
|
|
87
|
+
}, [children, errors]);
|
|
88
|
+
if (!content)
|
|
89
|
+
return null;
|
|
90
|
+
return (_jsx("div", { role: "alert", "data-slot": "field-error", className: cn("text-sm font-normal text-destructive", className), ...props, children: content }));
|
|
91
|
+
}
|
|
92
|
+
export { Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle, };
|
|
93
|
+
//# sourceMappingURL=field.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"field.js","sourceRoot":"","sources":["../../src/components/field.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import { type VariantProps } from "class-variance-authority";
|
|
3
|
+
declare const iconButtonVariants: (props?: ({
|
|
4
|
+
variant?: "primary" | "outlined" | "neutral" | "danger" | "ghost" | null | undefined;
|
|
5
|
+
size?: "sm" | "md" | "lg" | null | undefined;
|
|
6
|
+
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
7
|
+
type IconButtonProps = Omit<React.ComponentProps<"button">, "aria-label" | "children"> & VariantProps<typeof iconButtonVariants> & {
|
|
8
|
+
"aria-label": string;
|
|
9
|
+
children: React.ReactNode;
|
|
10
|
+
};
|
|
11
|
+
declare function IconButton({ "aria-label": ariaLabel, children, className, size, type, variant, ...props }: IconButtonProps): import("react/jsx-runtime").JSX.Element;
|
|
12
|
+
export { IconButton, iconButtonVariants };
|
|
13
|
+
export type { IconButtonProps };
|
|
14
|
+
//# sourceMappingURL=icon-button.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"icon-button.d.ts","sourceRoot":"","sources":["../../src/components/icon-button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAIjE,QAAA,MAAM,kBAAkB;;;8EA2BvB,CAAA;AAED,KAAK,eAAe,GAAG,IAAI,CACzB,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,EAC9B,YAAY,GAAG,UAAU,CAC1B,GACC,YAAY,CAAC,OAAO,kBAAkB,CAAC,GAAG;IACxC,YAAY,EAAE,MAAM,CAAA;IACpB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B,CAAA;AAEH,iBAAS,UAAU,CAAC,EAClB,YAAY,EAAE,SAAS,EACvB,QAAQ,EACR,SAAS,EACT,IAAW,EACX,IAAe,EACf,OAAiB,EACjB,GAAG,KAAK,EACT,EAAE,eAAe,2CAgBjB;AAED,OAAO,EAAE,UAAU,EAAE,kBAAkB,EAAE,CAAA;AACzC,YAAY,EAAE,eAAe,EAAE,CAAA"}
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { cva } from "class-variance-authority";
|
|
3
|
+
import { cn } from "@akbarsafari00/ods-react/lib/utils";
|
|
4
|
+
const iconButtonVariants = cva("inline-flex shrink-0 items-center justify-center rounded-[4px] border text-sm transition-colors outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:border-border disabled:bg-muted disabled:text-muted-foreground aria-busy:pointer-events-none [&_[data-slot=icon]]:pointer-events-none [&_[data-slot=icon]]:flex [&_[data-slot=icon]]:items-center [&_[data-slot=icon]]:justify-center [&_[data-slot=icon]>svg]:size-4 [&_[data-slot=icon]>svg]:shrink-0", {
|
|
5
|
+
variants: {
|
|
6
|
+
variant: {
|
|
7
|
+
ghost: "border-transparent bg-transparent text-muted-foreground hover:bg-muted hover:text-foreground active:bg-muted/80",
|
|
8
|
+
neutral: "border-border bg-secondary text-secondary-foreground hover:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_6%)] active:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_10%)]",
|
|
9
|
+
outlined: "border-primary bg-background text-primary hover:bg-primary/8 active:bg-primary/14",
|
|
10
|
+
primary: "border-primary bg-primary text-primary-foreground hover:bg-primary/90 active:bg-primary/80",
|
|
11
|
+
danger: "border-transparent bg-transparent text-destructive hover:bg-destructive/10 focus-visible:border-destructive focus-visible:ring-destructive/30 active:bg-destructive/16 dark:focus-visible:ring-destructive/40",
|
|
12
|
+
},
|
|
13
|
+
size: {
|
|
14
|
+
sm: "size-8",
|
|
15
|
+
md: "size-9",
|
|
16
|
+
lg: "size-10",
|
|
17
|
+
},
|
|
18
|
+
},
|
|
19
|
+
defaultVariants: {
|
|
20
|
+
variant: "ghost",
|
|
21
|
+
size: "md",
|
|
22
|
+
},
|
|
23
|
+
});
|
|
24
|
+
function IconButton({ "aria-label": ariaLabel, children, className, size = "md", type = "button", variant = "ghost", ...props }) {
|
|
25
|
+
return (_jsx("button", { type: type, "data-slot": "icon-button", "data-size": size, "data-variant": variant, "aria-label": ariaLabel, className: cn(iconButtonVariants({ variant, size, className })), ...props, children: _jsx("span", { "data-slot": "icon", "aria-hidden": "true", children: children }) }));
|
|
26
|
+
}
|
|
27
|
+
export { IconButton, iconButtonVariants };
|
|
28
|
+
//# sourceMappingURL=icon-button.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"icon-button.js","sourceRoot":"","sources":["../../src/components/icon-button.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,GAAG,EAAqB,MAAM,0BAA0B,CAAA;AAEjE,OAAO,EAAE,EAAE,EAAE,MAAM,oCAAoC,CAAA;AAEvD,MAAM,kBAAkB,GAAG,GAAG,CAC5B,8iBAA8iB,EAC9iB;IACE,QAAQ,EAAE;QACR,OAAO,EAAE;YACP,KAAK,EACH,iHAAiH;YACnH,OAAO,EACL,kMAAkM;YACpM,QAAQ,EACN,mFAAmF;YACrF,OAAO,EACL,4FAA4F;YAC9F,MAAM,EACJ,+MAA+M;SAClN;QACD,IAAI,EAAE;YACJ,EAAE,EAAE,QAAQ;YACZ,EAAE,EAAE,QAAQ;YACZ,EAAE,EAAE,SAAS;SACd;KACF;IACD,eAAe,EAAE;QACf,OAAO,EAAE,OAAO;QAChB,IAAI,EAAE,IAAI;KACX;CACF,CACF,CAAA;AAWD,SAAS,UAAU,CAAC,EAClB,YAAY,EAAE,SAAS,EACvB,QAAQ,EACR,SAAS,EACT,IAAI,GAAG,IAAI,EACX,IAAI,GAAG,QAAQ,EACf,OAAO,GAAG,OAAO,EACjB,GAAG,KAAK,EACQ;IAChB,OAAO,CACL,iBACE,IAAI,EAAE,IAAI,eACA,aAAa,eACZ,IAAI,kBACD,OAAO,gBACT,SAAS,EACrB,SAAS,EAAE,EAAE,CAAC,kBAAkB,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC,CAAC,KAC3D,KAAK,YAET,4BAAgB,MAAM,iBAAa,MAAM,YACtC,QAAQ,GACJ,GACA,CACV,CAAA;AACH,CAAC;AAED,OAAO,EAAE,UAAU,EAAE,kBAAkB,EAAE,CAAA"}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import { type VariantProps } from "class-variance-authority";
|
|
3
|
+
import { Input } from "@akbarsafari00/ods-react/components/input";
|
|
4
|
+
declare function InputGroup({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
|
|
5
|
+
declare const inputGroupAddonVariants: (props?: ({
|
|
6
|
+
align?: "inline-start" | "inline-end" | "block-start" | "block-end" | null | undefined;
|
|
7
|
+
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
8
|
+
declare function InputGroupAddon({ className, align, ...props }: React.ComponentProps<"div"> & VariantProps<typeof inputGroupAddonVariants>): import("react/jsx-runtime").JSX.Element;
|
|
9
|
+
declare const inputGroupButtonVariants: (props?: ({
|
|
10
|
+
size?: "sm" | "xs" | "icon-xs" | "icon-sm" | null | undefined;
|
|
11
|
+
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
12
|
+
declare function InputGroupButton({ className, type, size, ...props }: React.ComponentProps<"button"> & VariantProps<typeof inputGroupButtonVariants>): import("react/jsx-runtime").JSX.Element;
|
|
13
|
+
declare function InputGroupText({ className, ...props }: React.ComponentProps<"span">): import("react/jsx-runtime").JSX.Element;
|
|
14
|
+
declare function InputGroupInput({ className, ...props }: React.ComponentProps<typeof Input>): import("react/jsx-runtime").JSX.Element;
|
|
15
|
+
declare function InputGroupTextarea({ className, ...props }: React.ComponentProps<"textarea">): import("react/jsx-runtime").JSX.Element;
|
|
16
|
+
export { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, };
|
|
17
|
+
//# sourceMappingURL=input-group.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"input-group.d.ts","sourceRoot":"","sources":["../../src/components/input-group.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAEjE,OAAO,EAAE,KAAK,EAAE,MAAM,2CAA2C,CAAA;AAIjE,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAYvE;AAED,QAAA,MAAM,uBAAuB;;8EAmB5B,CAAA;AAED,iBAAS,eAAe,CAAC,EACvB,SAAS,EACT,KAAsB,EACtB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG,YAAY,CAAC,OAAO,uBAAuB,CAAC,2CAc5E;AAED,QAAA,MAAM,wBAAwB;;8EAgB7B,CAAA;AAED,iBAAS,gBAAgB,CAAC,EACxB,SAAS,EACT,IAAe,EACf,IAAW,EACX,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,GAC/B,YAAY,CAAC,OAAO,wBAAwB,CAAC,2CAa9C;AAED,iBAAS,cAAc,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,2CAU5E;AAED,iBAAS,eAAe,CAAC,EACvB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,KAAK,CAAC,2CAWpC;AAED,iBAAS,kBAAkB,CAAC,EAC1B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,UAAU,CAAC,2CAWlC;AAED,OAAO,EACL,UAAU,EACV,eAAe,EACf,gBAAgB,EAChB,eAAe,EACf,cAAc,EACd,kBAAkB,GACnB,CAAA"}
|