@ah-automation.nl/component-lib 0.0.7 → 0.0.9
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 +24 -4
- package/dist/components/multi-select.d.ts.map +1 -1
- package/dist/components/sidebar-nav.d.ts +1 -1
- package/dist/components/sidebar-nav.d.ts.map +1 -1
- package/dist/components/ui/collapsible.d.ts +7 -0
- package/dist/components/ui/collapsible.d.ts.map +1 -0
- package/dist/components/ui/select-styles.d.ts +5 -0
- package/dist/components/ui/select-styles.d.ts.map +1 -0
- package/dist/components/ui/select.d.ts.map +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +2919 -2600
- package/dist/styles.css +1 -1
- package/dist/types/index.d.ts +1 -1
- package/dist/types/index.d.ts.map +1 -1
- package/dist/types/sidebar-nav.d.ts +27 -4
- package/dist/types/sidebar-nav.d.ts.map +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -32,13 +32,30 @@ export function Example() {
|
|
|
32
32
|
```tsx
|
|
33
33
|
import * as React from "react";
|
|
34
34
|
import { Home, FolderKanban, Settings, LogOut } from "lucide-react";
|
|
35
|
-
import {
|
|
35
|
+
import {
|
|
36
|
+
Button,
|
|
37
|
+
SidebarNav,
|
|
38
|
+
type SidebarNavGroup,
|
|
39
|
+
type SidebarNavItem,
|
|
40
|
+
} from "component-lib";
|
|
36
41
|
import "component-lib/styles.css";
|
|
37
42
|
|
|
38
43
|
const items: SidebarNavItem[] = [
|
|
39
|
-
{ label: "Home", route: "/home", icon: Home },
|
|
40
|
-
{ label: "
|
|
41
|
-
|
|
44
|
+
{ label: "Home", route: "/home", icon: Home, order: 0 },
|
|
45
|
+
{ label: "Settings", route: "/settings", icon: Settings, order: 20 },
|
|
46
|
+
];
|
|
47
|
+
|
|
48
|
+
const groups: SidebarNavGroup[] = [
|
|
49
|
+
{
|
|
50
|
+
id: "projects",
|
|
51
|
+
label: "Projects",
|
|
52
|
+
icon: FolderKanban,
|
|
53
|
+
order: 10,
|
|
54
|
+
items: [
|
|
55
|
+
{ label: "Overview", route: "/projects", badge: "3" },
|
|
56
|
+
{ label: "Active", route: "/projects/active" },
|
|
57
|
+
],
|
|
58
|
+
},
|
|
42
59
|
];
|
|
43
60
|
|
|
44
61
|
export function AppLayout() {
|
|
@@ -48,6 +65,7 @@ export function AppLayout() {
|
|
|
48
65
|
<div className="flex min-h-screen">
|
|
49
66
|
<SidebarNav
|
|
50
67
|
items={items}
|
|
68
|
+
groups={groups}
|
|
51
69
|
activeRoute={activeRoute}
|
|
52
70
|
defaultCollapsed={false}
|
|
53
71
|
onItemClick={(item, event) => {
|
|
@@ -85,3 +103,5 @@ Notes:
|
|
|
85
103
|
- Import `"component-lib/styles.css"` once at app root.
|
|
86
104
|
- `defaultCollapsed` sets the initial sidebar state.
|
|
87
105
|
- `onItemClick` is optional. Keep `href` behavior, or intercept and route manually.
|
|
106
|
+
- `groups` supports one-level nested routes using collapsible `SidebarGroup` sections.
|
|
107
|
+
- `order` supports mixed sorting between flat `items` and `groups` (stable fallback preserves input order on ties).
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"multi-select.d.ts","sourceRoot":"","sources":["../../src/components/multi-select.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"multi-select.d.ts","sourceRoot":"","sources":["../../src/components/multi-select.tsx"],"names":[],"mappings":"AAeA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAE7D,iBAAS,WAAW,CAAC,EACnB,OAAO,EACP,KAAK,EACL,aAAa,EACb,WAA8B,EAC9B,QAAgB,EAChB,IAAI,EACJ,SAAS,EACT,gBAAgB,EAChB,gBAAgB,EAChB,aAAoB,EACpB,cAAsB,EACtB,QAAgB,EAChB,kBAAmC,GACpC,EAAE,gBAAgB,2CA0LlB;AAED,OAAO,EAAE,WAAW,EAAE,CAAC"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import type { SidebarNavProps } from "@/types/sidebar-nav";
|
|
2
|
-
declare function SidebarNav({ items, activeRoute, defaultCollapsed, onItemClick, logo, footer, className, headerClassName, contentClassName, menuClassName, itemClassName, footerClassName, }: SidebarNavProps): import("react/jsx-runtime").JSX.Element;
|
|
2
|
+
declare function SidebarNav({ items, groups, activeRoute, defaultCollapsed, onItemClick, logo, footer, className, headerClassName, contentClassName, menuClassName, itemClassName, footerClassName, }: SidebarNavProps): import("react/jsx-runtime").JSX.Element;
|
|
3
3
|
export { SidebarNav };
|
|
4
4
|
//# sourceMappingURL=sidebar-nav.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sidebar-nav.d.ts","sourceRoot":"","sources":["../../src/components/sidebar-nav.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"sidebar-nav.d.ts","sourceRoot":"","sources":["../../src/components/sidebar-nav.tsx"],"names":[],"mappings":"AA2BA,OAAO,KAAK,EAIV,eAAe,EAChB,MAAM,qBAAqB,CAAC;AAmC7B,iBAAS,UAAU,CAAC,EAClB,KAAU,EACV,MAAW,EACX,WAAW,EACX,gBAAwB,EACxB,WAAW,EACX,IAAI,EACJ,MAAM,EACN,SAAS,EACT,eAAe,EACf,gBAAgB,EAChB,aAAa,EACb,aAAa,EACb,eAAe,GAChB,EAAE,eAAe,2CA8PjB;AAED,OAAO,EAAE,UAAU,EAAE,CAAC"}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import { Collapsible as CollapsiblePrimitive } from "radix-ui";
|
|
3
|
+
declare function Collapsible({ ...props }: React.ComponentProps<typeof CollapsiblePrimitive.Root>): import("react/jsx-runtime").JSX.Element;
|
|
4
|
+
declare function CollapsibleTrigger({ ...props }: React.ComponentProps<typeof CollapsiblePrimitive.Trigger>): import("react/jsx-runtime").JSX.Element;
|
|
5
|
+
declare function CollapsibleContent({ className, ...props }: React.ComponentProps<typeof CollapsiblePrimitive.Content>): import("react/jsx-runtime").JSX.Element;
|
|
6
|
+
export { Collapsible, CollapsibleContent, CollapsibleTrigger };
|
|
7
|
+
//# sourceMappingURL=collapsible.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"collapsible.d.ts","sourceRoot":"","sources":["../../../src/components/ui/collapsible.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,WAAW,IAAI,oBAAoB,EAAE,MAAM,UAAU,CAAC;AAI/D,iBAAS,WAAW,CAAC,EACnB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,oBAAoB,CAAC,IAAI,CAAC,2CAExD;AAED,iBAAS,kBAAkB,CAAC,EAC1B,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,oBAAoB,CAAC,OAAO,CAAC,2CAI3D;AAED,iBAAS,kBAAkB,CAAC,EAC1B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,oBAAoB,CAAC,OAAO,CAAC,2CAQ3D;AAED,OAAO,EAAE,WAAW,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,CAAC"}
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
declare const selectTriggerClassName = "flex w-full items-center justify-between gap-1.5 rounded-lg border border-input bg-transparent py-2 pr-2 pl-2.5 text-sm whitespace-nowrap transition-colors outline-none select-none disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-placeholder:text-muted-foreground data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 ring-0 cursor-pointer";
|
|
2
|
+
declare const selectContentClassName = "relative max-h-(--radix-select-content-available-height) overflow-x-hidden overflow-y-auto rounded-lg bg-popover p-0 text-popover-foreground shadow-md ring-1 ring-foreground/10 z-60";
|
|
3
|
+
declare const selectItemClassName = "relative flex w-full cursor-pointer items-center gap-2 rounded-md px-2 py-1.5 text-sm outline-hidden transition-colors select-none data-disabled:pointer-events-none data-disabled:opacity-50 hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4";
|
|
4
|
+
export { selectTriggerClassName, selectContentClassName, selectItemClassName };
|
|
5
|
+
//# sourceMappingURL=select-styles.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"select-styles.d.ts","sourceRoot":"","sources":["../../../src/components/ui/select-styles.ts"],"names":[],"mappings":"AAAA,QAAA,MAAM,sBAAsB,qzBACwxB,CAAC;AAErzB,QAAA,MAAM,sBAAsB,0LAC6J,CAAC;AAE1L,QAAA,MAAM,mBAAmB,8WACoV,CAAC;AAE9W,OAAO,EAAE,sBAAsB,EAAE,sBAAsB,EAAE,mBAAmB,EAAE,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"select.d.ts","sourceRoot":"","sources":["../../../src/components/ui/select.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,MAAM,IAAI,eAAe,EAAE,MAAM,UAAU,CAAC;
|
|
1
|
+
{"version":3,"file":"select.d.ts","sourceRoot":"","sources":["../../../src/components/ui/select.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,MAAM,IAAI,eAAe,EAAE,MAAM,UAAU,CAAC;AAUrD,iBAAS,MAAM,CAAC,EACd,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC,2CAEnD;AAED,iBAAS,WAAW,CAAC,EACnB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,KAAK,CAAC,2CAQpD;AAED,iBAAS,WAAW,CAAC,EACnB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,KAAK,CAAC,2CAEpD;AAED,iBAAS,aAAa,CAAC,EACrB,SAAS,EACT,IAAgB,EAChB,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,OAAO,CAAC,GAAG;IACxD,IAAI,CAAC,EAAE,IAAI,GAAG,SAAS,CAAC;CACzB,2CAcA;AAED,iBAAS,aAAa,CAAC,EACrB,SAAS,EACT,QAAQ,EACR,QAAmB,EACnB,KAAgB,EAChB,IAAe,EACf,UAAc,EACd,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,OAAO,CAAC,2CA8BtD;AAED,iBAAS,WAAW,CAAC,EACnB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,KAAK,CAAC,2CAQpD;AAED,iBAAS,UAAU,CAAC,EAClB,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC,2CAiBnD;AAED,iBAAS,eAAe,CAAC,EACvB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,SAAS,CAAC,2CAQxD;AAED,iBAAS,oBAAoB,CAAC,EAC5B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,cAAc,CAAC,2CAa7D;AAED,iBAAS,sBAAsB,CAAC,EAC9B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,gBAAgB,CAAC,2CAa/D;AAED,OAAO,EACL,MAAM,EACN,aAAa,EACb,WAAW,EACX,UAAU,EACV,WAAW,EACX,sBAAsB,EACtB,oBAAoB,EACpB,eAAe,EACf,aAAa,EACb,WAAW,GACZ,CAAC"}
|
package/dist/index.d.ts
CHANGED
|
@@ -4,5 +4,5 @@ export { GenericDrawer } from "./components/generic-drawer";
|
|
|
4
4
|
export { MultiSelect } from "./components/multi-select";
|
|
5
5
|
export { SidebarNav } from "./components/sidebar-nav";
|
|
6
6
|
export { SingleSelect } from "./components/single-select";
|
|
7
|
-
export type { GenericDrawerProps, MultiSelectOption, MultiSelectProps, SidebarNavItem, SidebarNavProps, SingleSelectOption, SingleSelectProps, } from "./types";
|
|
7
|
+
export type { GenericDrawerProps, MultiSelectOption, MultiSelectProps, SidebarNavGroup, SidebarNavGroupItem, SidebarNavIcon, SidebarNavItem, SidebarNavProps, SingleSelectOption, SingleSelectProps, } from "./types";
|
|
8
8
|
//# sourceMappingURL=index.d.ts.map
|
package/dist/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,aAAa,CAAC;AAErB,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAChD,OAAO,EAAE,aAAa,EAAE,MAAM,6BAA6B,CAAC;AAC5D,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AACxD,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AACtD,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,YAAY,EACV,kBAAkB,EAClB,iBAAiB,EACjB,gBAAgB,EAChB,cAAc,EACd,eAAe,EACf,kBAAkB,EAClB,iBAAiB,GAClB,MAAM,SAAS,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,aAAa,CAAC;AAErB,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAChD,OAAO,EAAE,aAAa,EAAE,MAAM,6BAA6B,CAAC;AAC5D,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AACxD,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AACtD,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,YAAY,EACV,kBAAkB,EAClB,iBAAiB,EACjB,gBAAgB,EAChB,eAAe,EACf,mBAAmB,EACnB,cAAc,EACd,cAAc,EACd,eAAe,EACf,kBAAkB,EAClB,iBAAiB,GAClB,MAAM,SAAS,CAAC"}
|