@hachej/boring-ui-kit 0.3.1 → 0.4.0

package/styles/file-tree.css

@@ -1,46 +1,45 @@
-/* shadcn/ui sidebar-11 adaptation; MIT. See ../THIRD_PARTY_NOTICES.md. */
-[data-boring="file-tree"] {
-  color: var(--foreground, #18181b);
-  background: var(--background, #fff);
-  font: inherit;
-  min-width: 0;
-}
+/* Layout only. Appearance (colour, radius, border, shadow, type, motion) belongs to the host's shadcn components: Button, Input, Empty,
+   Separator, Collapsible and the sidebar menu. */
+[data-boring="file-tree"] { min-width: 0; }
 [data-boring="file-tree"] *, [data-boring="file-tree"] *::before, [data-boring="file-tree"] *::after { box-sizing: border-box; }
+[data-boring="file-tree"][data-variant="list"] { position: relative; min-height: 100%; }
+[data-boring="file-tree"] .file-tree-menu { margin: 0; padding: .5rem; list-style: none; }
+[data-boring="file-tree"][data-variant="list"] .file-tree-menu { padding: 0 .75rem .75rem; }
 [data-boring="file-tree"] ul { list-style: none; }
-[data-boring="file-tree"] button, [data-boring="file-tree"] input { font: inherit; }
-[data-boring="file-tree"] button { cursor: pointer; }
-[data-boring="file-tree"] [data-slot="sidebar-menu"] { display: flex; width: 100%; min-width: 0; flex-direction: column; gap: .25rem; margin: 0; padding: .5rem; }
-[data-boring="file-tree"] [data-slot="sidebar-menu-item"] { position: relative; border-radius: .375rem; outline: none; }
-[data-boring="file-tree"] [data-slot="sidebar-menu-item"] > div { display: flex; align-items: center; gap: .25rem; }
-[data-boring="file-tree"] [data-slot="sidebar-menu-button"] {
-  display: flex; align-items: center; gap: .5rem; flex: 1; width: 100%; min-width: 0;
-  height: 2rem; overflow: hidden; border: 0; border-radius: .375rem; padding: .5rem;
-  background: transparent; color: inherit; text-align: left; font-size: .875rem;
-  line-height: 1.25rem; outline: none; transition: width .15s, height .15s, padding .15s;
-}
-[data-boring="file-tree"] [data-slot="sidebar-menu-button"]:hover,
-[data-boring="file-tree"] [data-slot="sidebar-menu-button"]:active {
-  background: var(--sidebar-accent, var(--accent, #f4f4f5));
-  color: var(--sidebar-accent-foreground, var(--accent-foreground, #18181b));
-}
-[data-boring="file-tree"] [data-slot="sidebar-menu-button"][data-active="true"] { font-weight: 500; color: var(--sidebar-accent-foreground, var(--accent-foreground, #18181b)); }
-[data-boring="file-tree"] [data-slot="sidebar-menu-button"] > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-[data-boring="file-tree"] [data-slot="sidebar-menu-button"] > svg { width: 1rem; height: 1rem; flex-shrink: 0; transition: transform .15s; }
-[data-boring="file-tree"] [data-slot="sidebar-menu-item"][data-state="open"] > div > button > svg:first-child { transform: rotate(90deg); }
-[data-boring="file-tree"] [data-slot="sidebar-menu-sub"] {
-  display: flex; min-width: 0; flex-direction: column; gap: .25rem;
-  margin: 0 .875rem; padding: .125rem .625rem; transform: translateX(1px);
-  border-left: 1px solid var(--sidebar-border, var(--border, #e4e4e7));
-}
-[data-boring="file-tree"] [data-slot="sidebar-menu-sub"][hidden] { display: none; }
-[data-boring="file-tree"] [data-slot="sidebar-menu-item"]:focus-visible,
-[data-boring="file-tree"] button:focus-visible,
-[data-boring="file-tree"] input:focus-visible { outline: 2px solid var(--sidebar-ring, var(--ring, #71717a)); outline-offset: 2px; }
-[data-boring="file-tree"] button:disabled { pointer-events: none; opacity: .5; }
-[data-boring="file-tree"] > div:first-child { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; padding: .5rem; }
-[data-boring="file-tree"] input[type="search"] { flex: 1; min-width: 0; padding: .375rem .5rem; border: 1px solid var(--input, #d4d4d8); border-radius: .375rem; color: inherit; background: transparent; }
-[data-boring="file-tree"] input[type="file"] { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
+[data-boring="file-tree"] .file-tree-item { position: relative; outline: none; }
+[data-boring="file-tree"] .file-tree-item > div { display: flex; align-items: center; gap: .25rem; }
+[data-boring="file-tree"] .file-tree-row-button { flex: 1; width: 100%; min-width: 0; justify-content: flex-start; overflow: hidden; }
+[data-boring="file-tree"][data-variant="list"] .file-tree-row-button { height: auto; min-height: 3rem; }
+[data-boring="file-tree"] .file-tree-row-button > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+[data-boring="file-tree"] .file-tree-item[aria-expanded="true"] > div > button > svg:first-child { transform: rotate(90deg); }
+[data-boring="file-tree"] .file-tree-chevron-space { display: block; flex: 0 0 1rem; }
+[data-boring="file-tree"] .file-tree-copy { display: flex; align-items: center; gap: .5rem; min-width: 0; flex: 1; text-align: start; }
+[data-boring="file-tree"][data-variant="list"] .file-tree-copy { flex-direction: column; align-items: stretch; gap: 0; }
+[data-boring="file-tree"] .file-tree-name, [data-boring="file-tree"] .file-tree-parent { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+[data-boring="file-tree"] [data-file-meta] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted-foreground); font-weight: 400; }
+[data-boring="file-tree"] .file-tree-header { display: flex; align-items: center; gap: .5rem; padding: .75rem 1rem .5rem; min-height: 3.5rem; }
+[data-boring="file-tree"] .file-tree-header h2 { margin: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+[data-boring="file-tree"] .file-tree-count { flex: 1; color: var(--muted-foreground); font-variant-numeric: tabular-nums; }
+[data-boring="file-tree"] .file-tree-toolbar { display: flex; align-items: center; gap: .5rem; padding: .5rem; }
+[data-boring="file-tree"][data-variant="list"] .file-tree-toolbar { padding: .25rem 1rem .75rem; }
+[data-boring="file-tree"] .file-tree-search { display: flex; flex: 1; min-width: 0; position: relative; }
+[data-boring="file-tree"] .file-tree-search > [data-slot="input"] { flex: 1; width: 100%; min-width: 0; }
+[data-boring="file-tree"][data-variant="list"] .file-tree-search > [data-slot="input"] { padding-left: 2.25rem; }
+[data-boring="file-tree"][data-variant="list"] .file-tree-search > svg { position: absolute; left: .75rem; top: 50%; transform: translateY(-50%); width: 1rem; height: 1rem; pointer-events: none; color: var(--muted-foreground); }
+[data-boring="file-tree"] input[type="file"] { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
+[data-boring="file-tree"] .file-tree-status { padding: .5rem; color: var(--muted-foreground); }
+[data-boring="file-tree"] .file-tree-history { padding: .5rem; }
 [data-boring="file-tree"] pre { max-height: 20rem; overflow: auto; white-space: pre-wrap; }
-@media (prefers-reduced-motion: reduce) {
-  [data-boring="file-tree"] [data-slot="sidebar-menu-button"], [data-boring="file-tree"] [data-slot="sidebar-menu-button"] > svg { transition: none; }
+[data-boring="file-tree"] .file-tree-announcements { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
+[data-boring="file-tree"] [data-upload-spinner] { flex-shrink: 0; width: 1rem; height: 1rem; margin: .5rem; color: var(--muted-foreground); }
+[data-boring="file-tree"] [data-upload-error] { display: block; padding: 0 .5rem .5rem; color: var(--destructive); white-space: normal; overflow-wrap: anywhere; }
+[data-boring="file-tree"] > p[role="alert"], [data-boring="file-tree"] > ul[aria-label] { overflow-wrap: anywhere; }
+[data-boring="file-tree"] .file-tree-drop { position: absolute; inset: .25rem; z-index: 5; display: flex; flex-direction: column; pointer-events: none; }
+[data-boring="file-tree"] .file-tree-drop > [data-slot="empty"] { flex: 1; background: var(--background); }
+@media (hover: hover) and (pointer: fine) {
+  [data-boring="file-tree"] [data-file-more] { opacity: 0; }
+  [data-boring="file-tree"] .file-tree-item > div:hover [data-file-more],
+  [data-boring="file-tree"] .file-tree-item:focus-within > div [data-file-more],
+  [data-boring="file-tree"] [data-file-more][aria-expanded="true"] { opacity: 1; }
 }
+[data-boring="file-tree"] .file-tree-empty { min-height: 14rem; }

package/dist/file-tree-shadcn.d.ts

@@ -1,8 +0,0 @@
-import type { ComponentProps } from 'react';
-export declare function SidebarMenu({ className, ...props }: ComponentProps<'ul'>): import("react").JSX.Element;
-export declare function SidebarMenuItem({ className, ...props }: ComponentProps<'li'>): import("react").JSX.Element;
-export declare function SidebarMenuButton({ className, isActive, ...props }: ComponentProps<'button'> & {
-    readonly isActive?: boolean;
-}): import("react").JSX.Element;
-export declare function SidebarMenuSub({ className, ...props }: ComponentProps<'ul'>): import("react").JSX.Element;
-//# sourceMappingURL=file-tree-shadcn.d.ts.map

package/dist/file-tree-shadcn.js

@@ -1,14 +0,0 @@
-'use client';
-import { jsx as _jsx } from "react/jsx-runtime";
-export function SidebarMenu({ className = '', ...props }) {
-    return _jsx("ul", { "data-slot": "sidebar-menu", "data-sidebar": "menu", className: `flex w-full min-w-0 flex-col gap-1 ${className}`, ...props });
-}
-export function SidebarMenuItem({ className = '', ...props }) {
-    return _jsx("li", { "data-slot": "sidebar-menu-item", "data-sidebar": "menu-item", className: `group/menu-item relative ${className}`, ...props });
-}
-export function SidebarMenuButton({ className = '', isActive = false, ...props }) {
-    return _jsx("button", { type: "button", "data-slot": "sidebar-menu-button", "data-sidebar": "menu-button", "data-size": "default", "data-active": isActive, className: `peer/menu-button flex h-8 w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm ring-sidebar-ring outline-hidden transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 ${className}`, ...props });
-}
-export function SidebarMenuSub({ className = '', ...props }) {
-    return _jsx("ul", { "data-slot": "sidebar-menu-sub", "data-sidebar": "menu-sub", className: `mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-sidebar-border px-2.5 py-0.5 ${className}`, ...props });
-}