@skylab-kulubu/skylcn-ui 0.1.0

package/dist/components/display-extra.d.ts

@@ -0,0 +1,91 @@
+import { type LucideIcon } from 'lucide-react';
+import { type ComponentProps, type ReactNode } from 'react';
+export type DescriptionItem = {
+    label: ReactNode;
+    value: ReactNode;
+};
+/** Labelled facts about one thing, for detail pages: e-mail, team, joined, role. */
+export declare function DescriptionList({ items, columns, className, }: {
+    items: readonly DescriptionItem[];
+    /** Columns from the sm breakpoint; one column on phones. */
+    columns?: 1 | 2 | 3;
+    className?: string;
+}): import("react").JSX.Element;
+export type TimelineItem = {
+    id: string;
+    title: ReactNode;
+    description?: ReactNode;
+    /** When it happened, already formatted, such as "2 saat önce". */
+    time?: ReactNode;
+    icon?: LucideIcon;
+    /** Someone who did it, shown instead of an icon. */
+    person?: {
+        name: string;
+        src?: string | null;
+    };
+    tone?: 'neutral' | 'brand' | 'success' | 'warning' | 'danger';
+};
+/** What happened, in order, along a line: an approval's history, a member's activity, an event programme. */
+export declare function Timeline({ items, className, }: {
+    items: readonly TimelineItem[];
+    className?: string;
+}): import("react").JSX.Element;
+export type Step = {
+    id: string;
+    label: ReactNode;
+    description?: ReactNode;
+};
+/**
+ * Where a multi-step task stands: done steps ticked, the current one ringed.
+ * Pair it with Swap for the step's content.
+ */
+export declare function Stepper({ steps, current, className, }: {
+    steps: readonly Step[];
+    /** Index of the current step. */
+    current: number;
+    className?: string;
+}): import("react").JSX.Element;
+/** A few people as overlapping avatars, with how many more there are. */
+export declare function AvatarGroup({ people, max, size, className, }: {
+    people: readonly {
+        name: string;
+        src?: string | null;
+    }[];
+    max?: number;
+    size?: 'sm' | 'md';
+    className?: string;
+}): import("react").JSX.Element;
+export type DropzoneProps = {
+    onFiles: (files: File[]) => void;
+    /** File types the picker offers, such as "image/*,.pdf". */
+    accept?: string;
+    multiple?: boolean;
+    /** What the files are for, such as "Özgeçmiş (PDF, en fazla 5 MB)". */
+    hint?: ReactNode;
+    disabled?: boolean;
+    className?: string;
+};
+/**
+ * Drop files here or press to pick them; dragging is never the only way in.
+ * The frame lights up while files are held over it.
+ */
+export declare function Dropzone({ onFiles, accept, multiple, hint, disabled, className, }: DropzoneProps): import("react").JSX.Element;
+/**
+ * Actions for the rows a reader has picked, rising from the bottom while
+ * anything is selected: move, e-mail, remove.
+ */
+export declare function BulkBar({ count, onClear, children, className, }: {
+    count: number;
+    onClear: () => void;
+    /** The actions, usually small buttons. */
+    children: ReactNode;
+    className?: string;
+}): import("react").JSX.Element;
+export type BannerProps = Omit<ComponentProps<'div'>, 'title'> & {
+    icon?: LucideIcon;
+    action?: ReactNode;
+    onDismiss?: () => void;
+};
+/** A strip across the top of a page for news everyone should see once: a new console, a maintenance window. */
+export declare function Banner({ icon: Icon, action, onDismiss, className, children, ...props }: BannerProps): import("react").JSX.Element;
+//# sourceMappingURL=display-extra.d.ts.map

package/dist/components/display-extra.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"display-extra.d.ts","sourceRoot":"","sources":["../../src/components/display-extra.tsx"],"names":[],"mappings":"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"}

package/dist/components/display-extra.js

@@ -0,0 +1,91 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Check, FileUp, Megaphone, X } from 'lucide-react';
+import { AnimatePresence, m } from 'motion/react';
+import { useId, useRef, useState } from 'react';
+import { cn } from '../lib/cn.js';
+import { transitions } from '../lib/motion-tokens.js';
+import { useSkylcn } from '../lib/provider.js';
+import { Avatar } from './avatar.js';
+/** Labelled facts about one thing, for detail pages: e-mail, team, joined, role. */
+export function DescriptionList({ items, columns = 2, className, }) {
+    return (_jsx("dl", { "data-slot": "description-list", className: cn('grid gap-x-6 gap-y-4', columns === 2 && 'sm:grid-cols-2', columns === 3 && 'sm:grid-cols-3', className), children: items.map((item, i) => (_jsxs("div", { className: "flex min-w-0 flex-col gap-1", children: [_jsx("dt", { className: "text-3xs font-medium tracking-label text-subtle-foreground uppercase", children: item.label }), _jsx("dd", { className: "min-w-0 text-sm break-words text-foreground", children: item.value })] }, i))) }));
+}
+const TONE = {
+    neutral: 'border-border bg-muted text-muted-foreground',
+    brand: 'border-skylab-400/40 bg-skylab-500/10 text-skylab-300',
+    success: 'border-success/40 bg-success/10 text-success',
+    warning: 'border-warning/40 bg-warning/10 text-warning',
+    danger: 'border-destructive/40 bg-destructive/10 text-destructive',
+};
+/** What happened, in order, along a line: an approval's history, a member's activity, an event programme. */
+export function Timeline({ items, className, }) {
+    return (_jsx("ol", { "data-slot": "timeline", className: cn('flex flex-col', className), children: items.map((item, i) => {
+            const Icon = item.icon;
+            return (_jsxs("li", { className: "relative flex gap-3 pb-5 last:pb-0", children: [i < items.length - 1 ? (_jsx("span", { "aria-hidden": true, className: "absolute top-8 bottom-0 left-3.5 w-px -translate-x-1/2 bg-border" })) : null, item.person ? (_jsx(Avatar, { name: item.person.name, src: item.person.src, size: "sm" })) : (_jsx("span", { className: cn('grid size-7 shrink-0 place-items-center rounded-full border', TONE[item.tone ?? 'neutral']), children: Icon ? (_jsx(Icon, { className: "size-3.5", "aria-hidden": true })) : (_jsx("span", { className: "size-1.5 rounded-full bg-current" })) })), _jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-0.5 pt-1", children: [_jsxs("div", { className: "flex flex-wrap items-baseline justify-between gap-x-3", children: [_jsx("p", { className: "text-sm text-foreground", children: item.title }), item.time ? (_jsx("p", { className: "text-2xs text-subtle-foreground tabular-nums", children: item.time })) : null] }), item.description ? (_jsx("div", { className: "text-xs leading-relaxed text-muted-foreground", children: item.description })) : null] })] }, item.id));
+        }) }));
+}
+/**
+ * Where a multi-step task stands: done steps ticked, the current one ringed.
+ * Pair it with Swap for the step's content.
+ */
+export function Stepper({ steps, current, className, }) {
+    return (_jsx("ol", { "data-slot": "stepper", className: cn('flex w-full items-start gap-2', className), children: steps.map((step, i) => {
+            const done = i < current;
+            const active = i === current;
+            return (_jsxs("li", { "aria-current": active ? 'step' : undefined, className: "flex min-w-0 flex-1 flex-col gap-2", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: cn('grid size-6 shrink-0 place-items-center rounded-full border text-2xs font-semibold tabular-nums transition-colors duration-(--motion-duration-base)', done && 'border-skylab-400 bg-skylab-500 text-primary-foreground', active &&
+                                    'border-skylab-400 bg-skylab-500/15 text-skylab-300 ring-4 ring-skylab-500/10', !done && !active && 'border-border text-subtle-foreground'), children: done ? _jsx(Check, { className: "size-3.5", "aria-hidden": true }) : i + 1 }), i < steps.length - 1 ? (_jsx("span", { "aria-hidden": true, className: "h-px flex-1 overflow-hidden rounded-full bg-border", children: _jsx("span", { className: "block h-full bg-skylab-400 transition-[width] duration-(--motion-duration-slow) ease-enter", style: { width: done ? '100%' : '0%' } }) })) : null] }), _jsxs("div", { className: "min-w-0 pr-2", children: [_jsx("p", { className: cn('truncate text-xs font-medium', active || done ? 'text-foreground' : 'text-muted-foreground'), children: step.label }), step.description ? (_jsx("p", { className: "hidden truncate text-2xs text-subtle-foreground sm:block", children: step.description })) : null] })] }, step.id));
+        }) }));
+}
+/* Avatar group */
+/** A few people as overlapping avatars, with how many more there are. */
+export function AvatarGroup({ people, max = 4, size = 'sm', className, }) {
+    const { messages } = useSkylcn();
+    const shown = people.slice(0, max);
+    const rest = people.length - shown.length;
+    return (_jsxs("div", { "data-slot": "avatar-group", className: cn('flex items-center', className), children: [shown.map((person, i) => (_jsx(Avatar, { name: person.name, src: person.src, size: size, className: cn('ring-2 ring-background', i > 0 && '-ml-2') }, `${person.name}-${i}`))), rest > 0 ? (_jsxs("span", { title: messages.morePeople(rest), className: cn('-ml-2 grid shrink-0 place-items-center rounded-full border border-border bg-muted text-3xs font-semibold text-muted-foreground tabular-nums ring-2 ring-background', size === 'sm' ? 'size-7' : 'size-9'), children: ["+", rest] })) : null] }));
+}
+/**
+ * Drop files here or press to pick them; dragging is never the only way in.
+ * The frame lights up while files are held over it.
+ */
+export function Dropzone({ onFiles, accept, multiple = false, hint, disabled = false, className, }) {
+    const { messages } = useSkylcn();
+    const input = useRef(null);
+    const [over, setOver] = useState(false);
+    const id = useId();
+    return (_jsxs("div", { "data-slot": "dropzone", "data-over": over || undefined, onDragOver: (event) => {
+            if (disabled)
+                return;
+            event.preventDefault();
+            setOver(true);
+        }, onDragLeave: () => setOver(false), onDrop: (event) => {
+            event.preventDefault();
+            setOver(false);
+            if (disabled)
+                return;
+            const files = Array.from(event.dataTransfer.files);
+            if (files.length)
+                onFiles(multiple ? files : files.slice(0, 1));
+        }, className: cn('relative flex flex-col items-center justify-center gap-2 rounded-xl border border-dashed border-border-strong px-6 py-8 text-center', 'transition-[border-color,background-color] duration-(--motion-duration-fast)', over && 'border-skylab-400 bg-skylab-500/10', disabled && 'opacity-50', className), children: [_jsx("span", { className: cn('grid size-10 place-items-center rounded-full bg-muted text-muted-foreground transition-transform duration-(--motion-duration-base) ease-enter', over && 'scale-110 text-skylab-300'), children: _jsx(FileUp, { className: "size-5", "aria-hidden": true }) }), _jsxs("label", { htmlFor: id, className: "text-sm text-foreground", children: [_jsx("span", { className: "cursor-pointer font-medium text-skylab-300 underline-offset-4 hover:underline", children: messages.chooseFile }), ' ', messages.orDropHere] }), hint ? _jsx("p", { className: "text-2xs text-subtle-foreground", children: hint }) : null, _jsx("input", { ref: input, id: id, type: "file", accept: accept, multiple: multiple, disabled: disabled, className: "sr-only", onChange: (event) => {
+                    const files = Array.from(event.target.files ?? []);
+                    if (files.length)
+                        onFiles(files);
+                    event.target.value = '';
+                } })] }));
+}
+/* Bulk action bar */
+/**
+ * Actions for the rows a reader has picked, rising from the bottom while
+ * anything is selected: move, e-mail, remove.
+ */
+export function BulkBar({ count, onClear, children, className, }) {
+    const { messages } = useSkylcn();
+    return (_jsx(AnimatePresence, { children: count > 0 ? (_jsxs(m.div, { role: "toolbar", "aria-label": messages.selected(count), initial: { y: 24, opacity: 0 }, animate: { y: 0, opacity: 1, transition: transitions.spring }, exit: { y: 24, opacity: 0, transition: transitions.exit }, className: cn('fixed inset-x-4 bottom-4 z-40 mx-auto flex max-w-xl items-center gap-2 rounded-xl border border-border-strong bg-popover px-3 py-2 shadow-overlay sm:bottom-6', 'pb-[calc(0.5rem+env(safe-area-inset-bottom))] sm:pb-2', className), children: [_jsx("span", { className: "text-xs text-foreground tabular-nums", children: messages.selected(count) }), _jsx("span", { "aria-hidden": true, className: "h-4 w-px bg-border" }), _jsx("div", { className: "flex min-w-0 flex-1 flex-wrap items-center gap-1.5", children: children }), _jsx("button", { type: "button", onClick: onClear, "aria-label": messages.clearSelection, className: "grid size-7 place-items-center rounded-md text-subtle-foreground outline-hidden hover:bg-accent hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring", children: _jsx(X, { className: "size-4" }) })] }, "bulk")) : null }));
+}
+/** A strip across the top of a page for news everyone should see once: a new console, a maintenance window. */
+export function Banner({ icon: Icon = Megaphone, action, onDismiss, className, children, ...props }) {
+    const { messages } = useSkylcn();
+    return (_jsxs("div", { "data-slot": "banner", role: "status", className: cn('flex items-center gap-3 border-b border-skylab-400/20 bg-skylab-500/10 px-4 py-2 text-xs text-foreground', className), ...props, children: [_jsx(Icon, { className: "size-4 shrink-0 text-skylab-300", "aria-hidden": true }), _jsx("div", { className: "min-w-0 flex-1", children: children }), action, onDismiss ? (_jsx("button", { type: "button", onClick: onDismiss, "aria-label": messages.close, className: "grid size-6 place-items-center rounded-md text-subtle-foreground outline-hidden hover:bg-accent hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring", children: _jsx(X, { className: "size-3.5" }) })) : null] }));
+}
+//# sourceMappingURL=display-extra.js.map

package/dist/components/display-extra.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"display-extra.js","sourceRoot":"","sources":["../../src/components/display-extra.tsx"],"names":[],"mappings":"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"}

package/dist/components/drawer.d.ts

@@ -0,0 +1,22 @@
+import { Drawer as DrawerPrimitive } from '@base-ui/react/drawer';
+import { type ComponentProps, type ReactNode } from 'react';
+export type DrawerSide = 'right' | 'left' | 'bottom';
+export type DrawerProps = DrawerPrimitive.Root.Props & {
+    /** The edge it slides from, and the way a swipe sends it back. */
+    side?: DrawerSide;
+};
+/** A panel that slides in from an edge and is swiped, tapped outside or Esc'd away. */
+export declare function Drawer({ side, ...props }: DrawerProps): import("react").JSX.Element;
+export declare const DrawerTrigger: DrawerPrimitive.Trigger;
+export declare const DrawerClose: DrawerPrimitive.Close;
+export type DrawerContentProps = DrawerPrimitive.Popup.Props & {
+    /** Render inside this element instead of the page body, e.g. the admin content panel. */
+    container?: DrawerPrimitive.Portal.Props['container'];
+    children?: ReactNode;
+};
+export declare function DrawerContent({ className, container, children, ...props }: DrawerContentProps): import("react").JSX.Element;
+export declare function DrawerHeader({ className, ...props }: ComponentProps<'div'>): import("react").JSX.Element;
+export declare function DrawerTitle({ className, ...props }: DrawerPrimitive.Title.Props): import("react").JSX.Element;
+export declare function DrawerDescription({ className, ...props }: DrawerPrimitive.Description.Props): import("react").JSX.Element;
+export declare function DrawerBody({ className, ...props }: ComponentProps<'div'>): import("react").JSX.Element;
+//# sourceMappingURL=drawer.d.ts.map

package/dist/components/drawer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"drawer.d.ts","sourceRoot":"","sources":["../../src/components/drawer.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,MAAM,IAAI,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAElE,OAAO,EAA6B,KAAK,cAAc,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAIvF,MAAM,MAAM,UAAU,GAAG,OAAO,GAAG,MAAM,GAAG,QAAQ,CAAC;AAMrD,MAAM,MAAM,WAAW,GAAG,eAAe,CAAC,IAAI,CAAC,KAAK,GAAG;IACrD,kEAAkE;IAClE,IAAI,CAAC,EAAE,UAAU,CAAC;CACnB,CAAC;AAEF,uFAAuF;AACvF,wBAAgB,MAAM,CAAC,EAAE,IAAc,EAAE,GAAG,KAAK,EAAE,EAAE,WAAW,+BAM/D;AAED,eAAO,MAAM,aAAa,yBAA0B,CAAC;AACrD,eAAO,MAAM,WAAW,uBAAwB,CAAC;AAiBjD,MAAM,MAAM,kBAAkB,GAAG,eAAe,CAAC,KAAK,CAAC,KAAK,GAAG;IAC7D,yFAAyF;IACzF,SAAS,CAAC,EAAE,eAAe,CAAC,MAAM,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC;IACtD,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,CAAC;AAEF,wBAAgB,aAAa,CAAC,EAAE,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,kBAAkB,+BA8E7F;AAED,wBAAgB,YAAY,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,CAAC,KAAK,CAAC,+BAU1E;AAED,wBAAgB,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,eAAe,CAAC,KAAK,CAAC,KAAK,+BAU/E;AAED,wBAAgB,iBAAiB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,eAAe,CAAC,WAAW,CAAC,KAAK,+BAO3F;AAED,wBAAgB,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,CAAC,KAAK,CAAC,+BAIxE"}

package/dist/components/drawer.js

@@ -0,0 +1,50 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Drawer as DrawerPrimitive } from '@base-ui/react/drawer';
+import { ChevronsLeft, ChevronsRight } from 'lucide-react';
+import { createContext, useContext } from 'react';
+import { cn } from '../lib/cn.js';
+import { useSkylcn } from '../lib/provider.js';
+const SideContext = createContext('right');
+const SWIPE = { right: 'right', left: 'left', bottom: 'down' };
+/** A panel that slides in from an edge and is swiped, tapped outside or Esc'd away. */
+export function Drawer({ side = 'right', ...props }) {
+    return (_jsx(SideContext.Provider, { value: side, children: _jsx(DrawerPrimitive.Root, { swipeDirection: SWIPE[side], ...props }) }));
+}
+export const DrawerTrigger = DrawerPrimitive.Trigger;
+export const DrawerClose = DrawerPrimitive.Close;
+// Follows the finger while swiping, then settles with a speed that matches the swipe.
+const MOVE = {
+    right: '[transform:translateX(var(--drawer-swipe-movement-x))] data-starting-style:[transform:translateX(100%)] data-ending-style:[transform:translateX(100%)]',
+    left: '[transform:translateX(var(--drawer-swipe-movement-x))] data-starting-style:[transform:translateX(-100%)] data-ending-style:[transform:translateX(-100%)]',
+    bottom: '[transform:translateY(var(--drawer-swipe-movement-y))] data-starting-style:[transform:translateY(100%)] data-ending-style:[transform:translateY(100%)]',
+};
+const PLACE = {
+    right: 'inset-y-0 right-0 flex-row',
+    left: 'inset-y-0 left-0 flex-row-reverse',
+    bottom: 'inset-x-0 bottom-0 flex-col',
+};
+export function DrawerContent({ className, container, children, ...props }) {
+    const { messages } = useSkylcn();
+    const side = useContext(SideContext);
+    const scoped = Boolean(container);
+    const EdgeIcon = side === 'left' ? ChevronsLeft : ChevronsRight;
+    return (_jsxs(DrawerPrimitive.Portal, { container: container, children: [_jsx(DrawerPrimitive.Backdrop, { className: cn('inset-0 z-50 bg-black opacity-[calc(0.4*(1-var(--drawer-swipe-progress)))] transition-opacity duration-(--motion-duration-slow) ease-enter', 'data-ending-style:opacity-0 data-starting-style:opacity-0 data-swiping:duration-0', scoped ? 'absolute' : 'fixed') }), _jsx(DrawerPrimitive.Viewport, { className: cn('inset-0 z-50', scoped ? 'absolute' : 'fixed'), children: _jsx(DrawerPrimitive.Popup, { "data-slot": "drawer-content", "data-side": side, className: cn('absolute flex outline-hidden', PLACE[side], MOVE[side], 'transition-[transform,opacity] duration-(--motion-duration-spring) ease-spring data-swiping:duration-0', 'data-ending-style:duration-[calc(var(--drawer-swipe-strength,1)*var(--motion-duration-base))] data-ending-style:ease-exit', 
+                    // Reduced motion fades the panel in place instead of sliding it
+                    'motion-reduce:data-ending-style:[transform:none] motion-reduce:data-ending-style:opacity-0 motion-reduce:data-starting-style:[transform:none] motion-reduce:data-starting-style:opacity-0'), ...props, children: side === 'bottom' ? (_jsxs("div", { className: cn('flex max-h-[85dvh] w-full flex-col overflow-hidden rounded-t-2xl border-t border-border bg-sheet pb-[env(safe-area-inset-bottom)] shadow-overlay', className), children: [_jsx("div", { "aria-hidden": true, className: "mx-auto mt-2.5 mb-1 h-1 w-10 shrink-0 rounded-full bg-border-strong" }), _jsx(DrawerPrimitive.Content, { className: "flex min-h-0 flex-1 flex-col", children: children })] })) : (_jsxs(_Fragment, { children: [_jsx(DrawerPrimitive.Close, { title: messages.closePanel, "aria-label": messages.closePanel, className: cn('group relative flex h-full w-5 items-center justify-center border-y border-border bg-sheet text-subtle-foreground outline-hidden transition-colors hover:text-secondary-foreground focus-visible:text-foreground', side === 'right'
+                                    ? '-mr-px rounded-l-full border-l'
+                                    : '-ml-px rounded-r-full border-r'), children: _jsx(EdgeIcon, { className: "size-3.5 opacity-60 transition-transform duration-(--motion-duration-base) group-hover:scale-110 group-hover:opacity-100", strokeWidth: 2.5 }) }), _jsx("div", { className: cn('flex h-full w-[min(92vw,420px)] flex-col overflow-hidden border-y border-border bg-sheet pb-[env(safe-area-inset-bottom)] shadow-overlay', side === 'right' ? 'border-r' : 'border-l', className), children: _jsx(DrawerPrimitive.Content, { className: "flex min-h-0 flex-1 flex-col", children: children }) })] })) }) })] }));
+}
+export function DrawerHeader({ className, ...props }) {
+    return (_jsx("div", { className: cn('flex min-h-10 shrink-0 flex-col justify-center gap-0.5 border-b border-border px-4 py-2', className), ...props }));
+}
+export function DrawerTitle({ className, ...props }) {
+    return (_jsx(DrawerPrimitive.Title, { className: cn('min-w-0 truncate text-sm font-semibold tracking-wide text-foreground', className), ...props }));
+}
+export function DrawerDescription({ className, ...props }) {
+    return (_jsx(DrawerPrimitive.Description, { className: cn('text-2xs text-subtle-foreground', className), ...props }));
+}
+export function DrawerBody({ className, ...props }) {
+    return (_jsx("div", { className: cn('scrollbar min-h-0 flex-1 overflow-y-auto p-4', className), ...props }));
+}
+//# sourceMappingURL=drawer.js.map

package/dist/components/drawer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"drawer.js","sourceRoot":"","sources":["../../src/components/drawer.tsx"],"names":[],"mappings":"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"}

package/dist/components/feedback.d.ts

@@ -0,0 +1,63 @@
+import { Meter as MeterPrimitive } from '@base-ui/react/meter';
+import { Progress as ProgressPrimitive } from '@base-ui/react/progress';
+import { Separator as SeparatorPrimitive } from '@base-ui/react/separator';
+import type { ComponentProps, ReactNode } from 'react';
+/** A key or shortcut as the reader types it, such as ⌘K. */
+export declare function Kbd({ className, ...props }: ComponentProps<'kbd'>): import("react").JSX.Element;
+export declare function Separator({ className, orientation, ...props }: SeparatorPrimitive.Props): import("react").JSX.Element;
+export type ProgressProps = ProgressPrimitive.Root.Props & {
+    label?: ReactNode;
+    /** Shows the value at the end of the label row. */
+    showValue?: boolean;
+};
+/** How far a task has come: an upload, a send going out. Without a value it runs as busy. */
+export declare function Progress({ label, showValue, className, ...props }: ProgressProps): import("react").JSX.Element;
+export type MeterProps = MeterPrimitive.Root.Props & {
+    label: ReactNode;
+    /** Shares of max where the fill turns to warning, then danger. */
+    warnAt?: number;
+    dangerAt?: number;
+};
+/**
+ * A level within known bounds: storage used, seats taken. The fill carries
+ * the severity and the track is a lighter step of the same colour; the value
+ * is always written, never told by colour alone.
+ */
+export declare function Meter({ label, warnAt, dangerAt, value, max, min, className, ...props }: MeterProps): import("react").JSX.Element;
+declare const NOTICE: {
+    readonly info: {
+        readonly icon: import("lucide-react").LucideIcon;
+        readonly box: "border-info/30 bg-info/5";
+        readonly icon_: "text-info";
+    };
+    readonly success: {
+        readonly icon: import("lucide-react").LucideIcon;
+        readonly box: "border-success/30 bg-success/5";
+        readonly icon_: "text-success";
+    };
+    readonly warning: {
+        readonly icon: import("lucide-react").LucideIcon;
+        readonly box: "border-warning/30 bg-warning/5";
+        readonly icon_: "text-warning";
+    };
+    readonly danger: {
+        readonly icon: import("lucide-react").LucideIcon;
+        readonly box: "border-destructive/30 bg-destructive/5";
+        readonly icon_: "text-destructive";
+    };
+};
+export type NoticeProps = Omit<ComponentProps<'div'>, 'title'> & {
+    tone?: keyof typeof NOTICE;
+    title?: ReactNode;
+    /** A button or link under the text. */
+    action?: ReactNode;
+    /** Shows a close button; the parent removes the notice. */
+    onDismiss?: () => void;
+};
+/**
+ * A message inside the page: a service under maintenance, a form that closes
+ * tomorrow. The tone comes with an icon, so it is not told by colour alone.
+ */
+export declare function Notice({ tone, title, action, onDismiss, className, children, ...props }: NoticeProps): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=feedback.d.ts.map

package/dist/components/feedback.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"feedback.d.ts","sourceRoot":"","sources":["../../src/components/feedback.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,IAAI,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAC/D,OAAO,EAAE,QAAQ,IAAI,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AACxE,OAAO,EAAE,SAAS,IAAI,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AAE3E,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIvD,4DAA4D;AAC5D,wBAAgB,GAAG,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,CAAC,KAAK,CAAC,+BAWjE;AAED,wBAAgB,SAAS,CAAC,EACxB,SAAS,EACT,WAA0B,EAC1B,GAAG,KAAK,EACT,EAAE,kBAAkB,CAAC,KAAK,+BAY1B;AAED,MAAM,MAAM,aAAa,GAAG,iBAAiB,CAAC,IAAI,CAAC,KAAK,GAAG;IACzD,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,mDAAmD;IACnD,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAEF,6FAA6F;AAC7F,wBAAgB,QAAQ,CAAC,EAAE,KAAK,EAAE,SAAgB,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,aAAa,+BA6BvF;AAED,MAAM,MAAM,UAAU,GAAG,cAAc,CAAC,IAAI,CAAC,KAAK,GAAG;IACnD,KAAK,EAAE,SAAS,CAAC;IACjB,kEAAkE;IAClE,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF;;;;GAIG;AACH,wBAAgB,KAAK,CAAC,EACpB,KAAK,EACL,MAAa,EACb,QAAc,EACd,KAAK,EACL,GAAS,EACT,GAAO,EACP,SAAS,EACT,GAAG,KAAK,EACT,EAAE,UAAU,+BAqCZ;AAED,QAAA,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;CASF,CAAC;AAEX,MAAM,MAAM,WAAW,GAAG,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,OAAO,CAAC,GAAG;IAC/D,IAAI,CAAC,EAAE,MAAM,OAAO,MAAM,CAAC;IAC3B,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,uCAAuC;IACvC,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,2DAA2D;IAC3D,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;CACxB,CAAC;AAEF;;;GAGG;AACH,wBAAgB,MAAM,CAAC,EACrB,IAAa,EACb,KAAK,EACL,MAAM,EACN,SAAS,EACT,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,WAAW,+BA+Bb"}

package/dist/components/feedback.js

@@ -0,0 +1,59 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Meter as MeterPrimitive } from '@base-ui/react/meter';
+import { Progress as ProgressPrimitive } from '@base-ui/react/progress';
+import { Separator as SeparatorPrimitive } from '@base-ui/react/separator';
+import { CircleAlert, CircleCheck, Info, TriangleAlert, X } from 'lucide-react';
+import { cn } from '../lib/cn.js';
+import { useSkylcn } from '../lib/provider.js';
+/** A key or shortcut as the reader types it, such as ⌘K. */
+export function Kbd({ className, ...props }) {
+    return (_jsx("kbd", { "data-slot": "kbd", className: cn('inline-flex h-5 min-w-5 items-center justify-center rounded border border-border-strong bg-muted px-1 font-mono text-3xs text-secondary-foreground', className), ...props }));
+}
+export function Separator({ className, orientation = 'horizontal', ...props }) {
+    return (_jsx(SeparatorPrimitive, { orientation: orientation, className: cn('shrink-0 bg-border', orientation === 'horizontal' ? 'h-px w-full' : 'w-px self-stretch', className), ...props }));
+}
+/** How far a task has come: an upload, a send going out. Without a value it runs as busy. */
+export function Progress({ label, showValue = true, className, ...props }) {
+    const { locale } = useSkylcn();
+    return (_jsxs(ProgressPrimitive.Root, { "data-slot": "progress", 
+        // A fixed locale keeps the server and browser writing the value the same way
+        locale: locale === 'tr' ? 'tr-TR' : 'en-US', className: cn('flex flex-col gap-1.5', className), ...props, children: [label || showValue ? (_jsxs("div", { className: "flex items-baseline justify-between gap-3 text-xs", children: [label ? (_jsx(ProgressPrimitive.Label, { className: "text-secondary-foreground", children: label })) : (_jsx("span", {})), showValue ? (_jsx(ProgressPrimitive.Value, { className: "text-subtle-foreground tabular-nums" })) : null] })) : null, _jsx(ProgressPrimitive.Track, { className: "h-1.5 overflow-hidden rounded-full bg-muted", children: _jsx(ProgressPrimitive.Indicator, { className: "block h-full rounded-full bg-skylab-500 transition-[width] duration-(--motion-duration-slow) ease-enter data-indeterminate:w-1/3 data-indeterminate:animate-pulse" }) })] }));
+}
+/**
+ * A level within known bounds: storage used, seats taken. The fill carries
+ * the severity and the track is a lighter step of the same colour; the value
+ * is always written, never told by colour alone.
+ */
+export function Meter({ label, warnAt = 0.75, dangerAt = 0.9, value, max = 100, min = 0, className, ...props }) {
+    const { locale } = useSkylcn();
+    const share = (value - min) / (max - min || 1);
+    const tone = share >= dangerAt ? 'bg-destructive' : share >= warnAt ? 'bg-warning' : 'bg-skylab-500';
+    const track = share >= dangerAt
+        ? 'bg-destructive/15'
+        : share >= warnAt
+            ? 'bg-warning/15'
+            : 'bg-skylab-500/15';
+    return (_jsxs(MeterPrimitive.Root, { "data-slot": "meter", locale: locale === 'tr' ? 'tr-TR' : 'en-US', value: value, max: max, min: min, className: cn('flex flex-col gap-1.5', className), ...props, children: [_jsxs("div", { className: "flex items-baseline justify-between gap-3 text-xs", children: [_jsx(MeterPrimitive.Label, { className: "text-secondary-foreground", children: label }), _jsx(MeterPrimitive.Value, { className: "text-subtle-foreground tabular-nums" })] }), _jsx(MeterPrimitive.Track, { className: cn('h-1.5 overflow-hidden rounded-full transition-colors', track), children: _jsx(MeterPrimitive.Indicator, { className: cn('block h-full rounded-full transition-[width,background-color] duration-(--motion-duration-slow) ease-enter', tone) }) })] }));
+}
+const NOTICE = {
+    info: { icon: Info, box: 'border-info/30 bg-info/5', icon_: 'text-info' },
+    success: { icon: CircleCheck, box: 'border-success/30 bg-success/5', icon_: 'text-success' },
+    warning: { icon: TriangleAlert, box: 'border-warning/30 bg-warning/5', icon_: 'text-warning' },
+    danger: {
+        icon: CircleAlert,
+        box: 'border-destructive/30 bg-destructive/5',
+        icon_: 'text-destructive',
+    },
+};
+/**
+ * A message inside the page: a service under maintenance, a form that closes
+ * tomorrow. The tone comes with an icon, so it is not told by colour alone.
+ */
+export function Notice({ tone = 'info', title, action, onDismiss, className, children, ...props }) {
+    const { messages } = useSkylcn();
+    const style = NOTICE[tone];
+    const Icon = style.icon;
+    return (_jsxs("div", { "data-slot": "notice", role: tone === 'danger' ? 'alert' : 'status', className: cn('relative flex gap-3 rounded-lg border p-3 pr-10', style.box, className), ...props, children: [_jsx(Icon, { className: cn('mt-0.5 size-4 shrink-0', style.icon_), "aria-hidden": true }), _jsxs("div", { className: "flex min-w-0 flex-col gap-1", children: [title ? _jsx("p", { className: "text-sm font-medium text-foreground", children: title }) : null, children ? (_jsx("div", { className: "text-xs leading-relaxed text-muted-foreground", children: children })) : null, action ? _jsx("div", { className: "mt-1", children: action }) : null] }), onDismiss ? (_jsx("button", { type: "button", onClick: onDismiss, "aria-label": messages.close, className: "absolute top-2.5 right-2.5 grid size-6 place-items-center rounded-md text-subtle-foreground outline-hidden hover:bg-accent hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring", children: _jsx(X, { className: "size-3.5" }) })) : null] }));
+}
+//# sourceMappingURL=feedback.js.map

package/dist/components/feedback.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"feedback.js","sourceRoot":"","sources":["../../src/components/feedback.tsx"],"names":[],"mappings":"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"}

package/dist/components/field.d.ts

@@ -0,0 +1,21 @@
+import { Field as FieldPrimitive } from '@base-ui/react/field';
+import { Input as InputPrimitive } from '@base-ui/react/input';
+import type { LucideIcon } from 'lucide-react';
+import { type ComponentProps, type ReactNode } from 'react';
+export type InputProps = InputPrimitive.Props & {
+    /** A leading icon inside the box, such as a search glass. */
+    icon?: LucideIcon;
+    inputSize?: 'sm' | 'md';
+};
+export declare function Input({ className, icon: Icon, inputSize, ...props }: InputProps): import("react").JSX.Element;
+export declare function Textarea({ className, ...props }: ComponentProps<'textarea'>): import("react").JSX.Element;
+export declare function Label({ className, ...props }: ComponentProps<'label'>): import("react").JSX.Element;
+export type FieldProps = FieldPrimitive.Root.Props & {
+    label?: ReactNode;
+    description?: ReactNode;
+    /** Shown under the control and marks it invalid. */
+    error?: ReactNode;
+};
+/** A label, a control, a hint and an error, wired together for assistive tech. */
+export declare function Field({ label, description, error, className, children, ...props }: FieldProps): import("react").JSX.Element;
+//# sourceMappingURL=field.d.ts.map

package/dist/components/field.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"field.d.ts","sourceRoot":"","sources":["../../src/components/field.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,IAAI,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAC/D,OAAO,EAAE,KAAK,IAAI,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAC/D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC/C,OAAO,EAAY,KAAK,cAAc,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAetE,MAAM,MAAM,UAAU,GAAG,cAAc,CAAC,KAAK,GAAG;IAC9C,6DAA6D;IAC7D,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,SAAS,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;CACzB,CAAC;AAEF,wBAAgB,KAAK,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,SAAgB,EAAE,GAAG,KAAK,EAAE,EAAE,UAAU,+BAoBtF;AAED,wBAAgB,QAAQ,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,CAAC,UAAU,CAAC,+BAY3E;AAED,wBAAgB,KAAK,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,CAAC,OAAO,CAAC,+BAQrE;AAED,MAAM,MAAM,UAAU,GAAG,cAAc,CAAC,IAAI,CAAC,KAAK,GAAG;IACnD,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,oDAAoD;IACpD,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB,CAAC;AAEF,kFAAkF;AAClF,wBAAgB,KAAK,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,UAAU,+BA8B7F"}

package/dist/components/field.js

@@ -0,0 +1,38 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Field as FieldPrimitive } from '@base-ui/react/field';
+import { Input as InputPrimitive } from '@base-ui/react/input';
+import { useState } from 'react';
+import { cn } from '../lib/cn.js';
+import { Collapse } from './motion.js';
+const controlClass = [
+    'w-full min-w-0 rounded-md border border-input bg-input-background text-xs text-foreground outline-hidden',
+    // 16px on touch screens keeps iOS from zooming into the field
+    'pointer-coarse:text-base',
+    'transition-[border-color] duration-(--motion-duration-fast) ease-enter',
+    'placeholder:text-subtle-foreground',
+    'hover:border-border-strong focus-visible:border-skylab-400/50 focus-visible:ring-2 focus-visible:ring-skylab-400/20',
+    'aria-invalid:border-destructive/60 aria-invalid:ring-destructive/20 data-invalid:border-destructive/60',
+    'disabled:cursor-not-allowed disabled:opacity-60',
+];
+export function Input({ className, icon: Icon, inputSize = 'md', ...props }) {
+    const input = (_jsx(InputPrimitive, { "data-slot": "input", className: cn(controlClass, inputSize === 'sm' ? 'h-7 px-2 pointer-coarse:h-9' : 'h-8 px-2.5 pointer-coarse:h-10', Icon && (inputSize === 'sm' ? 'pl-7' : 'pl-8'), !Icon && className), ...props }));
+    if (!Icon)
+        return input;
+    return (_jsxs("div", { className: cn('relative', className), children: [_jsx(Icon, { className: "pointer-events-none absolute top-1/2 left-2.5 size-3.5 -translate-y-1/2 text-subtle-foreground" }), input] }));
+}
+export function Textarea({ className, ...props }) {
+    return (_jsx("textarea", { "data-slot": "textarea", className: cn(controlClass, 'field-sizing-content min-h-16 resize-y px-2.5 py-2 leading-relaxed', className), ...props }));
+}
+export function Label({ className, ...props }) {
+    return (_jsx("label", { "data-slot": "label", className: cn('text-2xs font-medium text-muted-foreground select-none', className), ...props }));
+}
+/** A label, a control, a hint and an error, wired together for assistive tech. */
+export function Field({ label, description, error, className, children, ...props }) {
+    // Keeps the last message while it closes, so it does not empty out on the way
+    const [shownError, setShownError] = useState(error);
+    if (error && error !== shownError)
+        setShownError(error);
+    return (_jsxs(FieldPrimitive.Root, { "data-slot": "field", invalid: Boolean(error) || undefined, className: cn('flex flex-col gap-1.5', className), ...props, children: [label ? (_jsx(FieldPrimitive.Label, { className: "text-2xs font-medium text-muted-foreground", children: label })) : null, children, description ? (_jsx(FieldPrimitive.Description, { className: "text-2xs leading-relaxed text-subtle-foreground", children: description })) : null, _jsx(Collapse, { open: Boolean(error), className: "-mt-1.5", children: _jsx(FieldPrimitive.Error, { match: true, className: "pt-1.5 text-2xs text-destructive", children: shownError }) })] }));
+}
+//# sourceMappingURL=field.js.map

package/dist/components/field.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"field.js","sourceRoot":"","sources":["../../src/components/field.tsx"],"names":[],"mappings":"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"}

package/dist/components/form-extra.d.ts

@@ -0,0 +1,58 @@
+import { NumberField as NumberFieldPrimitive } from '@base-ui/react/number-field';
+import { OTPField as OTPPrimitive } from '@base-ui/react/otp-field';
+import { Slider as SliderPrimitive } from '@base-ui/react/slider';
+import { type ReactNode } from 'react';
+export type ComboboxItem = {
+    value: string;
+    label: string;
+    hint?: ReactNode;
+};
+type CommonProps = {
+    items: readonly ComboboxItem[];
+    placeholder?: string;
+    /** Shown when typing matches nothing. */
+    emptyText?: ReactNode;
+    'aria-label'?: string;
+    id?: string;
+    disabled?: boolean;
+    className?: string;
+};
+export type ComboboxProps = CommonProps & {
+    value: string | null;
+    onValueChange: (value: string | null) => void;
+};
+/** A choice from a long list, narrowed by typing: a member, a team, a city. */
+export declare function Combobox({ items, value, onValueChange, placeholder, emptyText, className, ...props }: ComboboxProps): import("react").JSX.Element;
+export type MultiSelectProps = CommonProps & {
+    value: readonly string[];
+    onValueChange: (value: string[]) => void;
+};
+/** Several choices from a list, kept as removable chips: teams, tags, recipients. */
+export declare function MultiSelect({ items, value, onValueChange, placeholder, emptyText, className, ...props }: MultiSelectProps): import("react").JSX.Element;
+export type NumberFieldProps = NumberFieldPrimitive.Root.Props & {
+    'aria-label'?: string;
+};
+/** A number with − and + steps, arrow keys and Shift for larger steps; typed values are held within min and max. */
+export declare function NumberField({ className, 'aria-label': ariaLabel, ...props }: NumberFieldProps): import("react").JSX.Element;
+export type SliderProps = SliderPrimitive.Root.Props & {
+    label?: ReactNode;
+    /** Writes the value, or both ends of a range, beside the label. */
+    showValue?: boolean;
+    /** Names each thumb when there is no visible label, one per thumb. */
+    thumbLabels?: readonly string[];
+};
+/** A value, or a range with two thumbs, picked along a track: a budget, a team size. */
+export declare function Slider({ label, showValue, thumbLabels, className, ...props }: SliderProps): import("react").JSX.Element;
+export type OTPFieldProps = Omit<OTPPrimitive.Root.Props, 'length'> & {
+    /** How many characters the code has; six by default. */
+    length?: number;
+    /** Names the field for assistive tech when no label points at it. */
+    'aria-label'?: string;
+};
+/**
+ * A one-time code, one box per character. Pasting the whole code fills every
+ * box and password managers can fill it too; nothing blocks pasting.
+ */
+export declare function OTPField({ length, className, id, 'aria-label': ariaLabel, ...props }: OTPFieldProps): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=form-extra.d.ts.map

package/dist/components/form-extra.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-extra.d.ts","sourceRoot":"","sources":["../../src/components/form-extra.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,WAAW,IAAI,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AAClF,OAAO,EAAE,QAAQ,IAAI,YAAY,EAAE,MAAM,0BAA0B,CAAC;AACpE,OAAO,EAAE,MAAM,IAAI,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAElE,OAAO,EAAS,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAK9C,MAAM,MAAM,YAAY,GAAG;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,SAAS,CAAA;CAAE,CAAC;AAgD9E,KAAK,WAAW,GAAG;IACjB,KAAK,EAAE,SAAS,YAAY,EAAE,CAAC;IAC/B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,yCAAyC;IACzC,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG,WAAW,GAAG;IACxC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;CAC/C,CAAC;AAEF,+EAA+E;AAC/E,wBAAgB,QAAQ,CAAC,EACvB,KAAK,EACL,KAAK,EACL,aAAa,EACb,WAAW,EACX,SAAS,EACT,SAAS,EACT,GAAG,KAAK,EACT,EAAE,aAAa,+BAmCf;AAED,MAAM,MAAM,gBAAgB,GAAG,WAAW,GAAG;IAC3C,KAAK,EAAE,SAAS,MAAM,EAAE,CAAC;IACzB,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;CAC1C,CAAC;AAEF,qFAAqF;AACrF,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,KAAK,EACL,aAAa,EACb,WAAW,EACX,SAAS,EACT,SAAS,EACT,GAAG,KAAK,EACT,EAAE,gBAAgB,+BAyClB;AAED,MAAM,MAAM,gBAAgB,GAAG,oBAAoB,CAAC,IAAI,CAAC,KAAK,GAAG;IAC/D,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF,oHAAoH;AACpH,wBAAgB,WAAW,CAAC,EAAE,SAAS,EAAE,YAAY,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,+BA8B7F;AAED,MAAM,MAAM,WAAW,GAAG,eAAe,CAAC,IAAI,CAAC,KAAK,GAAG;IACrD,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,mEAAmE;IACnE,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,sEAAsE;IACtE,WAAW,CAAC,EAAE,SAAS,MAAM,EAAE,CAAC;CACjC,CAAC;AAEF,wFAAwF;AACxF,wBAAgB,MAAM,CAAC,EAAE,KAAK,EAAE,SAAgB,EAAE,WAAW,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,WAAW,+BAkChG;AAED,MAAM,MAAM,aAAa,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG;IACpE,wDAAwD;IACxD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,qEAAqE;IACrE,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF;;;GAGG;AACH,wBAAgB,QAAQ,CAAC,EACvB,MAAU,EACV,SAAS,EACT,EAAE,EACF,YAAY,EAAE,SAAS,EACvB,GAAG,KAAK,EACT,EAAE,aAAa,+BA4Bf"}