@skylab-kulubu/skylcn-ui 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/LICENSE +21 -0
- package/README.md +100 -0
- package/dist/assets/skylab-mark.d.ts +5 -0
- package/dist/assets/skylab-mark.d.ts.map +1 -0
- package/dist/assets/skylab-mark.js +29 -0
- package/dist/assets/skylab-mark.js.map +1 -0
- package/dist/charts/chart-frame.d.ts +42 -0
- package/dist/charts/chart-frame.d.ts.map +1 -0
- package/dist/charts/chart-frame.js +33 -0
- package/dist/charts/chart-frame.js.map +1 -0
- package/dist/charts/charts.d.ts +84 -0
- package/dist/charts/charts.d.ts.map +1 -0
- package/dist/charts/charts.js +194 -0
- package/dist/charts/charts.js.map +1 -0
- package/dist/charts/index.d.ts +3 -0
- package/dist/charts/index.d.ts.map +1 -0
- package/dist/charts/index.js +3 -0
- package/dist/charts/index.js.map +1 -0
- package/dist/components/accordion.d.ts +7 -0
- package/dist/components/accordion.d.ts.map +1 -0
- package/dist/components/accordion.js +17 -0
- package/dist/components/accordion.js.map +1 -0
- package/dist/components/app-shell.d.ts +96 -0
- package/dist/components/app-shell.d.ts.map +1 -0
- package/dist/components/app-shell.js +191 -0
- package/dist/components/app-shell.js.map +1 -0
- package/dist/components/avatar.d.ts +28 -0
- package/dist/components/avatar.d.ts.map +1 -0
- package/dist/components/avatar.js +26 -0
- package/dist/components/avatar.js.map +1 -0
- package/dist/components/badge.d.ts +41 -0
- package/dist/components/badge.d.ts.map +1 -0
- package/dist/components/badge.js +42 -0
- package/dist/components/badge.js.map +1 -0
- package/dist/components/bar-list.d.ts +33 -0
- package/dist/components/bar-list.d.ts.map +1 -0
- package/dist/components/bar-list.js +31 -0
- package/dist/components/bar-list.js.map +1 -0
- package/dist/components/breadcrumbs.d.ts +16 -0
- package/dist/components/breadcrumbs.d.ts.map +1 -0
- package/dist/components/breadcrumbs.js +21 -0
- package/dist/components/breadcrumbs.js.map +1 -0
- package/dist/components/button.d.ts +30 -0
- package/dist/components/button.d.ts.map +1 -0
- package/dist/components/button.js +51 -0
- package/dist/components/button.js.map +1 -0
- package/dist/components/calendar.d.ts +44 -0
- package/dist/components/calendar.d.ts.map +1 -0
- package/dist/components/calendar.js +93 -0
- package/dist/components/calendar.js.map +1 -0
- package/dist/components/card.d.ts +38 -0
- package/dist/components/card.d.ts.map +1 -0
- package/dist/components/card.js +38 -0
- package/dist/components/card.js.map +1 -0
- package/dist/components/carousel.d.ts +42 -0
- package/dist/components/carousel.d.ts.map +1 -0
- package/dist/components/carousel.js +92 -0
- package/dist/components/carousel.js.map +1 -0
- package/dist/components/checkbox.d.ts +3 -0
- package/dist/components/checkbox.d.ts.map +1 -0
- package/dist/components/checkbox.js +9 -0
- package/dist/components/checkbox.js.map +1 -0
- package/dist/components/command.d.ts +31 -0
- package/dist/components/command.d.ts.map +1 -0
- package/dist/components/command.js +91 -0
- package/dist/components/command.js.map +1 -0
- package/dist/components/copy-button.d.ts +10 -0
- package/dist/components/copy-button.d.ts.map +1 -0
- package/dist/components/copy-button.js +23 -0
- package/dist/components/copy-button.js.map +1 -0
- package/dist/components/data-list.d.ts +70 -0
- package/dist/components/data-list.d.ts.map +1 -0
- package/dist/components/data-list.js +119 -0
- package/dist/components/data-list.js.map +1 -0
- package/dist/components/dialog.d.ts +41 -0
- package/dist/components/dialog.d.ts.map +1 -0
- package/dist/components/dialog.js +49 -0
- package/dist/components/dialog.js.map +1 -0
- package/dist/components/display-extra.d.ts +91 -0
- package/dist/components/display-extra.d.ts.map +1 -0
- package/dist/components/display-extra.js +91 -0
- package/dist/components/display-extra.js.map +1 -0
- package/dist/components/drawer.d.ts +22 -0
- package/dist/components/drawer.d.ts.map +1 -0
- package/dist/components/drawer.js +50 -0
- package/dist/components/drawer.js.map +1 -0
- package/dist/components/feedback.d.ts +63 -0
- package/dist/components/feedback.d.ts.map +1 -0
- package/dist/components/feedback.js +59 -0
- package/dist/components/feedback.js.map +1 -0
- package/dist/components/field.d.ts +21 -0
- package/dist/components/field.d.ts.map +1 -0
- package/dist/components/field.js +38 -0
- package/dist/components/field.js.map +1 -0
- package/dist/components/form-extra.d.ts +58 -0
- package/dist/components/form-extra.d.ts.map +1 -0
- package/dist/components/form-extra.js +51 -0
- package/dist/components/form-extra.js.map +1 -0
- package/dist/components/icon-swap.d.ts +15 -0
- package/dist/components/icon-swap.d.ts.map +1 -0
- package/dist/components/icon-swap.js +13 -0
- package/dist/components/icon-swap.js.map +1 -0
- package/dist/components/list.d.ts +43 -0
- package/dist/components/list.d.ts.map +1 -0
- package/dist/components/list.js +30 -0
- package/dist/components/list.js.map +1 -0
- package/dist/components/menu.d.ts +41 -0
- package/dist/components/menu.d.ts.map +1 -0
- package/dist/components/menu.js +67 -0
- package/dist/components/menu.js.map +1 -0
- package/dist/components/month-calendar.d.ts +38 -0
- package/dist/components/month-calendar.d.ts.map +1 -0
- package/dist/components/month-calendar.js +64 -0
- package/dist/components/month-calendar.js.map +1 -0
- package/dist/components/motion.d.ts +43 -0
- package/dist/components/motion.d.ts.map +1 -0
- package/dist/components/motion.js +56 -0
- package/dist/components/motion.js.map +1 -0
- package/dist/components/navigation-menu.d.ts +28 -0
- package/dist/components/navigation-menu.d.ts.map +1 -0
- package/dist/components/navigation-menu.js +26 -0
- package/dist/components/navigation-menu.js.map +1 -0
- package/dist/components/page-header.d.ts +45 -0
- package/dist/components/page-header.d.ts.map +1 -0
- package/dist/components/page-header.js +37 -0
- package/dist/components/page-header.js.map +1 -0
- package/dist/components/pagination.d.ts +19 -0
- package/dist/components/pagination.d.ts.map +1 -0
- package/dist/components/pagination.js +70 -0
- package/dist/components/pagination.js.map +1 -0
- package/dist/components/popover.d.ts +10 -0
- package/dist/components/popover.d.ts.map +1 -0
- package/dist/components/popover.js +15 -0
- package/dist/components/popover.js.map +1 -0
- package/dist/components/preview-card.d.ts +11 -0
- package/dist/components/preview-card.d.ts.map +1 -0
- package/dist/components/preview-card.js +18 -0
- package/dist/components/preview-card.js.map +1 -0
- package/dist/components/proportion-bar.d.ts +16 -0
- package/dist/components/proportion-bar.d.ts.map +1 -0
- package/dist/components/proportion-bar.js +20 -0
- package/dist/components/proportion-bar.js.map +1 -0
- package/dist/components/radio-group.d.ts +11 -0
- package/dist/components/radio-group.d.ts.map +1 -0
- package/dist/components/radio-group.js +13 -0
- package/dist/components/radio-group.js.map +1 -0
- package/dist/components/reveal.d.ts +19 -0
- package/dist/components/reveal.d.ts.map +1 -0
- package/dist/components/reveal.js +25 -0
- package/dist/components/reveal.js.map +1 -0
- package/dist/components/segmented-control.d.ts +16 -0
- package/dist/components/segmented-control.d.ts.map +1 -0
- package/dist/components/segmented-control.js +21 -0
- package/dist/components/segmented-control.js.map +1 -0
- package/dist/components/select.d.ts +25 -0
- package/dist/components/select.d.ts.map +1 -0
- package/dist/components/select.js +33 -0
- package/dist/components/select.js.map +1 -0
- package/dist/components/side-nav.d.ts +33 -0
- package/dist/components/side-nav.d.ts.map +1 -0
- package/dist/components/side-nav.js +52 -0
- package/dist/components/side-nav.js.map +1 -0
- package/dist/components/skeleton.d.ts +4 -0
- package/dist/components/skeleton.d.ts.map +1 -0
- package/dist/components/skeleton.js +7 -0
- package/dist/components/skeleton.js.map +1 -0
- package/dist/components/skylab-loader.d.ts +10 -0
- package/dist/components/skylab-loader.d.ts.map +1 -0
- package/dist/components/skylab-loader.js +12 -0
- package/dist/components/skylab-loader.js.map +1 -0
- package/dist/components/sparkline.d.ts +12 -0
- package/dist/components/sparkline.d.ts.map +1 -0
- package/dist/components/sparkline.js +26 -0
- package/dist/components/sparkline.js.map +1 -0
- package/dist/components/state-card.d.ts +27 -0
- package/dist/components/state-card.d.ts.map +1 -0
- package/dist/components/state-card.js +17 -0
- package/dist/components/state-card.js.map +1 -0
- package/dist/components/switch.d.ts +15 -0
- package/dist/components/switch.d.ts.map +1 -0
- package/dist/components/switch.js +12 -0
- package/dist/components/switch.js.map +1 -0
- package/dist/components/tabs.d.ts +8 -0
- package/dist/components/tabs.d.ts.map +1 -0
- package/dist/components/tabs.js +17 -0
- package/dist/components/tabs.js.map +1 -0
- package/dist/components/toast.d.ts +17 -0
- package/dist/components/toast.d.ts.map +1 -0
- package/dist/components/toast.js +30 -0
- package/dist/components/toast.js.map +1 -0
- package/dist/components/tooltip.d.ts +15 -0
- package/dist/components/tooltip.d.ts.map +1 -0
- package/dist/components/tooltip.js +13 -0
- package/dist/components/tooltip.js.map +1 -0
- package/dist/components/tree.d.ts +26 -0
- package/dist/components/tree.d.ts.map +1 -0
- package/dist/components/tree.js +92 -0
- package/dist/components/tree.js.map +1 -0
- package/dist/components/trend-badge.d.ts +13 -0
- package/dist/components/trend-badge.d.ts.map +1 -0
- package/dist/components/trend-badge.js +22 -0
- package/dist/components/trend-badge.js.map +1 -0
- package/dist/data-table/data-table.d.ts +59 -0
- package/dist/data-table/data-table.d.ts.map +1 -0
- package/dist/data-table/data-table.js +207 -0
- package/dist/data-table/data-table.js.map +1 -0
- package/dist/data-table/index.d.ts +2 -0
- package/dist/data-table/index.d.ts.map +1 -0
- package/dist/data-table/index.js +2 -0
- package/dist/data-table/index.js.map +1 -0
- package/dist/index.d.ts +57 -0
- package/dist/index.d.ts.map +1 -0
- package/dist/index.js +57 -0
- package/dist/index.js.map +1 -0
- package/dist/lib/cn.d.ts +2 -0
- package/dist/lib/cn.d.ts.map +1 -0
- package/dist/lib/cn.js +2 -0
- package/dist/lib/cn.js.map +1 -0
- package/dist/lib/motion-preference.d.ts +11 -0
- package/dist/lib/motion-preference.d.ts.map +1 -0
- package/dist/lib/motion-preference.js +42 -0
- package/dist/lib/motion-preference.js.map +1 -0
- package/dist/lib/motion-tokens.d.ts +55 -0
- package/dist/lib/motion-tokens.d.ts.map +1 -0
- package/dist/lib/motion-tokens.js +26 -0
- package/dist/lib/motion-tokens.js.map +1 -0
- package/dist/lib/motion.d.ts +3 -0
- package/dist/lib/motion.d.ts.map +1 -0
- package/dist/lib/motion.js +19 -0
- package/dist/lib/motion.js.map +1 -0
- package/dist/lib/provider.d.ts +160 -0
- package/dist/lib/provider.d.ts.map +1 -0
- package/dist/lib/provider.js +156 -0
- package/dist/lib/provider.js.map +1 -0
- package/dist/lib/theme-script.d.ts +15 -0
- package/dist/lib/theme-script.d.ts.map +1 -0
- package/dist/lib/theme-script.js +15 -0
- package/dist/lib/theme-script.js.map +1 -0
- package/dist/lib/theme.d.ts +13 -0
- package/dist/lib/theme.d.ts.map +1 -0
- package/dist/lib/theme.js +78 -0
- package/dist/lib/theme.js.map +1 -0
- package/dist/lib/use-pending-indicator.d.ts +7 -0
- package/dist/lib/use-pending-indicator.d.ts.map +1 -0
- package/dist/lib/use-pending-indicator.js +27 -0
- package/dist/lib/use-pending-indicator.js.map +1 -0
- package/dist/lib/use-reduced-motion.d.ts +7 -0
- package/dist/lib/use-reduced-motion.d.ts.map +1 -0
- package/dist/lib/use-reduced-motion.js +28 -0
- package/dist/lib/use-reduced-motion.js.map +1 -0
- package/dist/styles/theme.css +368 -0
- package/dist/styles/tokens.css +248 -0
- package/package.json +90 -0
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
+
import { cn } from '../lib/cn.js';
|
|
4
|
+
import { useSkylcn } from '../lib/provider.js';
|
|
5
|
+
/**
|
|
6
|
+
* Categories as labelled rows over thin bars: the answers to a question, the
|
|
7
|
+
* reply rate of each question, the members of each team. Reads better than a
|
|
8
|
+
* chart when the labels are long, and doubles as a pick list.
|
|
9
|
+
*/
|
|
10
|
+
export function BarList({ items, max, showPercent = true, onSelect, selected = [], formatValue, className, }) {
|
|
11
|
+
const { locale } = useSkylcn();
|
|
12
|
+
const tag = locale === 'tr' ? 'tr-TR' : 'en-US';
|
|
13
|
+
const total = max ?? items.reduce((sum, item) => sum + item.value, 0);
|
|
14
|
+
const number = formatValue ?? ((value) => value.toLocaleString(tag));
|
|
15
|
+
const percent = (value) => {
|
|
16
|
+
const share = total ? (value / total) * 100 : 0;
|
|
17
|
+
const text = share.toLocaleString(tag, { maximumFractionDigits: share % 1 ? 1 : 0 });
|
|
18
|
+
return locale === 'tr' ? `%${text}` : `${text}%`;
|
|
19
|
+
};
|
|
20
|
+
return (_jsx("ul", { "data-slot": "bar-list", className: cn('flex flex-col gap-0.5', className), children: items.map((item) => {
|
|
21
|
+
const share = total ? Math.min((item.value / total) * 100, 100) : 0;
|
|
22
|
+
const chosen = selected.includes(item.key);
|
|
23
|
+
const body = (_jsxs(_Fragment, { children: [_jsxs("span", { className: "flex items-baseline justify-between gap-3", children: [_jsx("span", { className: cn('min-w-0 truncate text-xs', chosen ? 'text-foreground-strong' : 'text-secondary-foreground'), children: item.label }), _jsx("span", { className: cn('shrink-0 text-2xs tabular-nums', chosen ? 'text-muted-foreground' : 'text-subtle-foreground'), children: item.detail ?? (_jsxs(_Fragment, { children: [_jsx("span", { className: "text-secondary-foreground", children: number(item.value) }), showPercent ? ` · ${percent(item.value)}` : null] })) })] }), _jsx("span", { "aria-hidden": true, className: "mt-1.5 block h-1.5 overflow-hidden rounded-full bg-muted", children: _jsx("span", { className: cn('block h-full rounded-full transition-[width,background-color] duration-(--motion-duration-slow) ease-enter', item.disabled
|
|
24
|
+
? 'bg-faint-foreground'
|
|
25
|
+
: chosen
|
|
26
|
+
? 'bg-skylab-400'
|
|
27
|
+
: 'bg-skylab-500'), style: { width: `${share}%` } }) })] }));
|
|
28
|
+
return (_jsx("li", { children: onSelect && !item.disabled ? (_jsx("button", { type: "button", "aria-pressed": chosen, onClick: () => onSelect(item.key), className: cn('block w-full rounded-lg px-2.5 py-2 text-left outline-hidden transition-colors duration-(--motion-duration-fast)', 'focus-visible:ring-2 focus-visible:ring-ring', chosen ? 'bg-skylab-500/10' : 'hover:bg-accent'), children: body })) : (_jsx("div", { className: cn('px-2.5 py-2', item.disabled && 'opacity-60'), children: body })) }, item.key));
|
|
29
|
+
}) }));
|
|
30
|
+
}
|
|
31
|
+
//# sourceMappingURL=bar-list.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"bar-list.js","sourceRoot":"","sources":["../../src/components/bar-list.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAGb,OAAO,EAAE,EAAE,EAAE,MAAM,cAAc,CAAC;AAClC,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AA6B/C;;;;GAIG;AACH,MAAM,UAAU,OAAO,CAAC,EACtB,KAAK,EACL,GAAG,EACH,WAAW,GAAG,IAAI,EAClB,QAAQ,EACR,QAAQ,GAAG,EAAE,EACb,WAAW,EACX,SAAS,GACI;IACb,MAAM,EAAE,MAAM,EAAE,GAAG,SAAS,EAAE,CAAC;IAC/B,MAAM,GAAG,GAAG,MAAM,KAAK,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC;IAChD,MAAM,KAAK,GAAG,GAAG,IAAI,KAAK,CAAC,MAAM,CAAC,CAAC,GAAG,EAAE,IAAI,EAAE,EAAE,CAAC,GAAG,GAAG,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC;IACtE,MAAM,MAAM,GAAG,WAAW,IAAI,CAAC,CAAC,KAAa,EAAE,EAAE,CAAC,KAAK,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC,CAAC;IAC7E,MAAM,OAAO,GAAG,CAAC,KAAa,EAAE,EAAE;QAChC,MAAM,KAAK,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,GAAG,KAAK,CAAC,GAAG,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC;QAChD,MAAM,IAAI,GAAG,KAAK,CAAC,cAAc,CAAC,GAAG,EAAE,EAAE,qBAAqB,EAAE,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;QACrF,OAAO,MAAM,KAAK,IAAI,CAAC,CAAC,CAAC,IAAI,IAAI,EAAE,CAAC,CAAC,CAAC,GAAG,IAAI,GAAG,CAAC;IACnD,CAAC,CAAC;IAEF,OAAO,CACL,0BAAc,UAAU,EAAC,SAAS,EAAE,EAAE,CAAC,uBAAuB,EAAE,SAAS,CAAC,YACvE,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE;YAClB,MAAM,KAAK,GAAG,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,GAAG,GAAG,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;YACpE,MAAM,MAAM,GAAG,QAAQ,CAAC,QAAQ,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;YAC3C,MAAM,IAAI,GAAG,CACX,8BACE,gBAAM,SAAS,EAAC,2CAA2C,aACzD,eACE,SAAS,EAAE,EAAE,CACX,0BAA0B,EAC1B,MAAM,CAAC,CAAC,CAAC,wBAAwB,CAAC,CAAC,CAAC,2BAA2B,CAChE,YAEA,IAAI,CAAC,KAAK,GACN,EACP,eACE,SAAS,EAAE,EAAE,CACX,gCAAgC,EAChC,MAAM,CAAC,CAAC,CAAC,uBAAuB,CAAC,CAAC,CAAC,wBAAwB,CAC5D,YAEA,IAAI,CAAC,MAAM,IAAI,CACd,8BACE,eAAM,SAAS,EAAC,2BAA2B,YAAE,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,GAAQ,EACtE,WAAW,CAAC,CAAC,CAAC,MAAM,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,IAChD,CACJ,GACI,IACF,EACP,oCAAkB,SAAS,EAAC,0DAA0D,YACpF,eACE,SAAS,EAAE,EAAE,CACX,4GAA4G,EAC5G,IAAI,CAAC,QAAQ;gCACX,CAAC,CAAC,qBAAqB;gCACvB,CAAC,CAAC,MAAM;oCACN,CAAC,CAAC,eAAe;oCACjB,CAAC,CAAC,eAAe,CACtB,EACD,KAAK,EAAE,EAAE,KAAK,EAAE,GAAG,KAAK,GAAG,EAAE,GAC7B,GACG,IACN,CACJ,CAAC;YACF,OAAO,CACL,uBACG,QAAQ,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAC5B,iBACE,IAAI,EAAC,QAAQ,kBACC,MAAM,EACpB,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,GAAG,CAAC,EACjC,SAAS,EAAE,EAAE,CACX,kHAAkH,EAClH,8CAA8C,EAC9C,MAAM,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,iBAAiB,CAChD,YAEA,IAAI,GACE,CACV,CAAC,CAAC,CAAC,CACF,cAAK,SAAS,EAAE,EAAE,CAAC,aAAa,EAAE,IAAI,CAAC,QAAQ,IAAI,YAAY,CAAC,YAAG,IAAI,GAAO,CAC/E,IAhBM,IAAI,CAAC,GAAG,CAiBZ,CACN,CAAC;QACJ,CAAC,CAAC,GACC,CACN,CAAC;AACJ,CAAC"}
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
export type BreadcrumbItem = {
|
|
2
|
+
href: string;
|
|
3
|
+
label: string;
|
|
4
|
+
};
|
|
5
|
+
export type BreadcrumbsProps = {
|
|
6
|
+
items: readonly BreadcrumbItem[];
|
|
7
|
+
/** Names the trail when a page has more than one; "Sayfa yolu" by default. */
|
|
8
|
+
'aria-label'?: string;
|
|
9
|
+
className?: string;
|
|
10
|
+
};
|
|
11
|
+
/**
|
|
12
|
+
* The trail above a page. On small screens it keeps only the way back and the
|
|
13
|
+
* current page; links render through the provider's link component.
|
|
14
|
+
*/
|
|
15
|
+
export declare function Breadcrumbs({ items, 'aria-label': label, className }: BreadcrumbsProps): import("react").JSX.Element | null;
|
|
16
|
+
//# sourceMappingURL=breadcrumbs.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"breadcrumbs.d.ts","sourceRoot":"","sources":["../../src/components/breadcrumbs.tsx"],"names":[],"mappings":"AAMA,MAAM,MAAM,cAAc,GAAG;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAAC;AAE7D,MAAM,MAAM,gBAAgB,GAAG;IAC7B,KAAK,EAAE,SAAS,cAAc,EAAE,CAAC;IACjC,8EAA8E;IAC9E,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF;;;GAGG;AACH,wBAAgB,WAAW,CAAC,EAAE,KAAK,EAAE,YAAY,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,gBAAgB,sCAuEtF"}
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
3
|
+
import { ChevronRight } from 'lucide-react';
|
|
4
|
+
import { cn } from '../lib/cn.js';
|
|
5
|
+
import { useSkylcn } from '../lib/provider.js';
|
|
6
|
+
/**
|
|
7
|
+
* The trail above a page. On small screens it keeps only the way back and the
|
|
8
|
+
* current page; links render through the provider's link component.
|
|
9
|
+
*/
|
|
10
|
+
export function Breadcrumbs({ items, 'aria-label': label, className }) {
|
|
11
|
+
const { messages, Link } = useSkylcn();
|
|
12
|
+
if (items.length === 0)
|
|
13
|
+
return null;
|
|
14
|
+
const current = items[items.length - 1];
|
|
15
|
+
const previous = items.length > 1 ? items[items.length - 2] : null;
|
|
16
|
+
return (_jsxs("nav", { "data-slot": "breadcrumbs", "aria-label": label ?? messages.breadcrumb, className: cn('min-w-0 text-sm text-subtle-foreground', className), children: [_jsxs("div", { className: "flex min-w-0 items-center gap-1.5 md:hidden", children: [previous ? (_jsxs(_Fragment, { children: [_jsxs(Link, { href: previous.href, className: "inline-flex min-w-0 items-center gap-1 rounded-md py-1 text-muted-foreground transition-colors hover:text-foreground", children: [_jsx(ChevronRight, { className: "size-3.5 shrink-0 rotate-180" }), _jsx("span", { className: "max-w-30 truncate text-xs", children: previous.label })] }), _jsx(ChevronRight, { className: "size-3.5 shrink-0 text-faint-foreground" })] })) : null, _jsx("span", { "aria-current": "page", title: current.label, className: "max-w-40 truncate text-xs font-medium text-secondary-foreground", children: current.label })] }), _jsx("ol", { className: "hidden min-w-0 items-center md:flex", children: items.map((item, index) => {
|
|
17
|
+
const last = index === items.length - 1;
|
|
18
|
+
return (_jsxs("li", { className: cn('inline-flex items-center gap-1.5', last ? 'shrink-0' : 'min-w-0', index === items.length - 2 && 'shrink-6'), children: [index > 0 ? (_jsx(ChevronRight, { className: "mt-0.5 size-4 shrink-0 text-faint-foreground" })) : null, last ? (_jsx("span", { "aria-current": "page", title: item.label, className: "max-w-45 truncate font-medium text-secondary-foreground", children: item.label })) : (_jsx(Link, { href: item.href, title: item.label, className: "min-w-0 truncate rounded-md px-1.5 py-1 outline-hidden transition-colors hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring", children: item.label }))] }, `${index}-${item.href}`));
|
|
19
|
+
}) })] }));
|
|
20
|
+
}
|
|
21
|
+
//# sourceMappingURL=breadcrumbs.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"breadcrumbs.js","sourceRoot":"","sources":["../../src/components/breadcrumbs.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAC5C,OAAO,EAAE,EAAE,EAAE,MAAM,cAAc,CAAC;AAClC,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAW/C;;;GAGG;AACH,MAAM,UAAU,WAAW,CAAC,EAAE,KAAK,EAAE,YAAY,EAAE,KAAK,EAAE,SAAS,EAAoB;IACrF,MAAM,EAAE,QAAQ,EAAE,IAAI,EAAE,GAAG,SAAS,EAAE,CAAC;IACvC,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC;QAAE,OAAO,IAAI,CAAC;IACpC,MAAM,OAAO,GAAG,KAAK,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAE,CAAC;IACzC,MAAM,QAAQ,GAAG,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAE,CAAC,CAAC,CAAC,IAAI,CAAC;IAEpE,OAAO,CACL,4BACY,aAAa,gBACX,KAAK,IAAI,QAAQ,CAAC,UAAU,EACxC,SAAS,EAAE,EAAE,CAAC,wCAAwC,EAAE,SAAS,CAAC,aAElE,eAAK,SAAS,EAAC,6CAA6C,aACzD,QAAQ,CAAC,CAAC,CAAC,CACV,8BACE,MAAC,IAAI,IACH,IAAI,EAAE,QAAQ,CAAC,IAAI,EACnB,SAAS,EAAC,sHAAsH,aAEhI,KAAC,YAAY,IAAC,SAAS,EAAC,8BAA8B,GAAG,EACzD,eAAM,SAAS,EAAC,2BAA2B,YAAE,QAAQ,CAAC,KAAK,GAAQ,IAC9D,EACP,KAAC,YAAY,IAAC,SAAS,EAAC,yCAAyC,GAAG,IACnE,CACJ,CAAC,CAAC,CAAC,IAAI,EACR,+BACe,MAAM,EACnB,KAAK,EAAE,OAAO,CAAC,KAAK,EACpB,SAAS,EAAC,iEAAiE,YAE1E,OAAO,CAAC,KAAK,GACT,IACH,EACN,aAAI,SAAS,EAAC,qCAAqC,YAChD,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;oBACzB,MAAM,IAAI,GAAG,KAAK,KAAK,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC;oBACxC,OAAO,CACL,cAEE,SAAS,EAAE,EAAE,CACX,kCAAkC,EAClC,IAAI,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,EAC7B,KAAK,KAAK,KAAK,CAAC,MAAM,GAAG,CAAC,IAAI,UAAU,CACzC,aAEA,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,CACX,KAAC,YAAY,IAAC,SAAS,EAAC,8CAA8C,GAAG,CAC1E,CAAC,CAAC,CAAC,IAAI,EACP,IAAI,CAAC,CAAC,CAAC,CACN,+BACe,MAAM,EACnB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,SAAS,EAAC,yDAAyD,YAElE,IAAI,CAAC,KAAK,GACN,CACR,CAAC,CAAC,CAAC,CACF,KAAC,IAAI,IACH,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,SAAS,EAAC,6IAA6I,YAEtJ,IAAI,CAAC,KAAK,GACN,CACR,KA1BI,GAAG,KAAK,IAAI,IAAI,CAAC,IAAI,EAAE,CA2BzB,CACN,CAAC;gBACJ,CAAC,CAAC,GACC,IACD,CACP,CAAC;AACJ,CAAC"}
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import { Button as ButtonPrimitive } from '@base-ui/react/button';
|
|
2
|
+
import { type VariantProps } from 'class-variance-authority';
|
|
3
|
+
import type { LucideIcon } from 'lucide-react';
|
|
4
|
+
declare const buttonVariants: (props?: ({
|
|
5
|
+
variant?: "link" | "outline" | "primary" | "solid" | "ghost" | "destructive" | null | undefined;
|
|
6
|
+
size?: "sm" | "md" | "lg" | "icon-sm" | "icon" | "icon-lg" | null | undefined;
|
|
7
|
+
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
8
|
+
export type ButtonProps = ButtonPrimitive.Props & VariantProps<typeof buttonVariants> & {
|
|
9
|
+
/**
|
|
10
|
+
* Locks the button while an action runs. The SKY LAB mark takes the place of
|
|
11
|
+
* the content only if the wait lasts, so quick actions never flash it.
|
|
12
|
+
*/
|
|
13
|
+
pending?: boolean;
|
|
14
|
+
/**
|
|
15
|
+
* An icon that takes the label's place on hover and keyboard focus: the
|
|
16
|
+
* label slides down and out, the icon slides down in. The label stays the
|
|
17
|
+
* accessible name.
|
|
18
|
+
*/
|
|
19
|
+
hoverIcon?: LucideIcon;
|
|
20
|
+
};
|
|
21
|
+
export declare function Button({ className, variant, size, pending, disabled, children, render, nativeButton, hoverIcon: HoverIcon, ...props }: ButtonProps): import("react").JSX.Element;
|
|
22
|
+
export type IconButtonProps = Omit<ButtonProps, 'children'> & {
|
|
23
|
+
icon: LucideIcon;
|
|
24
|
+
/** Read by screen readers and shown as the native tooltip. */
|
|
25
|
+
label: string;
|
|
26
|
+
};
|
|
27
|
+
/** A square button holding one icon; the admin toolbars' action button. */
|
|
28
|
+
export declare function IconButton({ icon: Icon, label, size, pending, title, ...props }: IconButtonProps): import("react").JSX.Element;
|
|
29
|
+
export { buttonVariants };
|
|
30
|
+
//# sourceMappingURL=button.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../src/components/button.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,MAAM,IAAI,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAClE,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAM/C,QAAA,MAAM,cAAc;;;8EAkCnB,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG,eAAe,CAAC,KAAK,GAC7C,YAAY,CAAC,OAAO,cAAc,CAAC,GAAG;IACpC;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;OAIG;IACH,SAAS,CAAC,EAAE,UAAU,CAAC;CACxB,CAAC;AAEJ,wBAAgB,MAAM,CAAC,EACrB,SAAS,EACT,OAAO,EACP,IAAI,EACJ,OAAe,EACf,QAAQ,EACR,QAAQ,EACR,MAAM,EACN,YAAY,EACZ,SAAS,EAAE,SAAS,EACpB,GAAG,KAAK,EACT,EAAE,WAAW,+BA6Cb;AAED,MAAM,MAAM,eAAe,GAAG,IAAI,CAAC,WAAW,EAAE,UAAU,CAAC,GAAG;IAC5D,IAAI,EAAE,UAAU,CAAC;IACjB,8DAA8D;IAC9D,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,2EAA2E;AAC3E,wBAAgB,UAAU,CAAC,EACzB,IAAI,EAAE,IAAI,EACV,KAAK,EACL,IAAa,EACb,OAAO,EACP,KAAK,EACL,GAAG,KAAK,EACT,EAAE,eAAe,+BAMjB;AAED,OAAO,EAAE,cAAc,EAAE,CAAC"}
|
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
+
import { Button as ButtonPrimitive } from '@base-ui/react/button';
|
|
4
|
+
import { cva } from 'class-variance-authority';
|
|
5
|
+
import { isValidElement } from 'react';
|
|
6
|
+
import { cn } from '../lib/cn.js';
|
|
7
|
+
import { usePendingIndicator } from '../lib/use-pending-indicator.js';
|
|
8
|
+
import { SkylabLoader } from './skylab-loader.js';
|
|
9
|
+
const buttonVariants = cva([
|
|
10
|
+
'group/button relative inline-flex shrink-0 items-center justify-center gap-2 border font-medium whitespace-nowrap select-none',
|
|
11
|
+
'transition-[color,background-color,border-color,translate] duration-(--motion-duration-fast) ease-enter',
|
|
12
|
+
'outline-hidden focus-visible:ring-2 focus-visible:ring-ring',
|
|
13
|
+
'active:not-aria-[haspopup]:translate-y-px',
|
|
14
|
+
'disabled:cursor-not-allowed disabled:opacity-60 aria-busy:cursor-wait aria-busy:opacity-100',
|
|
15
|
+
"[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
|
16
|
+
], {
|
|
17
|
+
variants: {
|
|
18
|
+
variant: {
|
|
19
|
+
primary: 'border-skylab-400/40 bg-skylab-500/10 text-skylab-300 hover:border-skylab-300/60 hover:bg-skylab-400/20',
|
|
20
|
+
solid: 'border-transparent bg-primary text-primary-foreground hover:bg-primary/85',
|
|
21
|
+
outline: 'border-border bg-transparent text-secondary-foreground hover:border-border-strong hover:bg-accent',
|
|
22
|
+
ghost: 'border-transparent bg-transparent text-muted-foreground hover:bg-accent hover:text-foreground aria-expanded:bg-accent',
|
|
23
|
+
destructive: 'border-destructive/40 bg-destructive/10 text-destructive hover:border-destructive/60 hover:bg-destructive/20',
|
|
24
|
+
link: 'border-transparent px-0 text-skylab-300 underline-offset-4 hover:underline',
|
|
25
|
+
},
|
|
26
|
+
size: {
|
|
27
|
+
sm: 'h-7 rounded-md px-2.5 text-2xs pointer-coarse:h-9 pointer-coarse:text-xs',
|
|
28
|
+
md: 'h-8 rounded-md px-3 text-2xs pointer-coarse:h-10 pointer-coarse:px-3.5 pointer-coarse:text-xs',
|
|
29
|
+
lg: 'h-9 rounded-lg px-3.5 text-xs pointer-coarse:h-11 pointer-coarse:text-sm',
|
|
30
|
+
'icon-sm': 'size-7 rounded-md text-2xs pointer-coarse:size-9',
|
|
31
|
+
icon: 'size-8 rounded-md text-2xs pointer-coarse:size-10',
|
|
32
|
+
'icon-lg': 'size-9 rounded-lg text-xs pointer-coarse:size-11',
|
|
33
|
+
},
|
|
34
|
+
},
|
|
35
|
+
defaultVariants: { variant: 'outline', size: 'md' },
|
|
36
|
+
});
|
|
37
|
+
export function Button({ className, variant, size, pending = false, disabled, children, render, nativeButton, hoverIcon: HoverIcon, ...props }) {
|
|
38
|
+
const busy = usePendingIndicator(pending);
|
|
39
|
+
// A button rendered as a link (render={<a href />}) keeps link semantics.
|
|
40
|
+
const native = nativeButton ?? !(isValidElement(render) && render.type !== 'button');
|
|
41
|
+
return (_jsxs(ButtonPrimitive, { "data-slot": "button",
|
|
42
|
+
// Clipping at the button's own edge keeps the sliding icon whole; the
|
|
43
|
+
// 16px content box would shave its strokes
|
|
44
|
+
className: cn(buttonVariants({ variant, size }), HoverIcon && 'overflow-hidden', className), disabled: disabled || pending || busy, "aria-busy": busy || undefined, render: render, nativeButton: native, ...props, children: [_jsx("span", { "data-slot": "button-content", className: cn('inline-flex items-center justify-center gap-[inherit] transition-opacity duration-(--motion-duration-fast)', busy && 'opacity-0', HoverIcon && 'relative'), children: HoverIcon ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "inline-flex items-center gap-[inherit] transition-[translate,opacity] duration-(--motion-duration-base) ease-enter group-hover/button:translate-y-full group-hover/button:opacity-0 group-focus-visible/button:translate-y-full group-focus-visible/button:opacity-0 motion-reduce:translate-y-0!", children: children }), _jsx("span", { "aria-hidden": true, className: "absolute inset-0 grid -translate-y-full place-items-center opacity-0 transition-[translate,opacity] duration-(--motion-duration-base) ease-enter group-hover/button:translate-y-0 group-hover/button:opacity-100 group-focus-visible/button:translate-y-0 group-focus-visible/button:opacity-100 motion-reduce:translate-y-0!", children: _jsx(HoverIcon, {}) })] })) : (children) }), busy ? (_jsx(SkylabLoader, { size: 16, className: "absolute inset-0 m-auto enter-fade text-current" })) : null] }));
|
|
45
|
+
}
|
|
46
|
+
/** A square button holding one icon; the admin toolbars' action button. */
|
|
47
|
+
export function IconButton({ icon: Icon, label, size = 'icon', pending, title, ...props }) {
|
|
48
|
+
return (_jsx(Button, { size: size, "aria-label": label, title: title ?? label, pending: pending, ...props, children: _jsx(Icon, {}) }));
|
|
49
|
+
}
|
|
50
|
+
export { buttonVariants };
|
|
51
|
+
//# sourceMappingURL=button.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"button.js","sourceRoot":"","sources":["../../src/components/button.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
import { type ComponentProps } from 'react';
|
|
2
|
+
import { DayPicker, type DateRange } from 'react-day-picker';
|
|
3
|
+
export type { DateRange };
|
|
4
|
+
export type CalendarProps = ComponentProps<typeof DayPicker>;
|
|
5
|
+
/**
|
|
6
|
+
* A month grid for picking a day or a range, in the reader's language with
|
|
7
|
+
* weeks starting on Monday for Turkish. Arrow keys move by day, PageUp and
|
|
8
|
+
* PageDown by month.
|
|
9
|
+
*/
|
|
10
|
+
export declare function Calendar({ className, classNames, ...props }: CalendarProps): import("react").JSX.Element;
|
|
11
|
+
export type DatePickerProps = {
|
|
12
|
+
value: Date | null;
|
|
13
|
+
onValueChange: (value: Date | null) => void;
|
|
14
|
+
placeholder?: string;
|
|
15
|
+
/** Days before and after these cannot be picked. */
|
|
16
|
+
min?: Date;
|
|
17
|
+
max?: Date;
|
|
18
|
+
'aria-label'?: string;
|
|
19
|
+
id?: string;
|
|
20
|
+
className?: string;
|
|
21
|
+
};
|
|
22
|
+
/** A field that opens a calendar and closes once a day is picked. */
|
|
23
|
+
export declare function DatePicker({ value, onValueChange, placeholder, min, max, className, ...props }: DatePickerProps): import("react").JSX.Element;
|
|
24
|
+
export type DatePreset = {
|
|
25
|
+
label: string;
|
|
26
|
+
range: () => DateRange;
|
|
27
|
+
};
|
|
28
|
+
export type DateRangePickerProps = {
|
|
29
|
+
value: DateRange | undefined;
|
|
30
|
+
onValueChange: (value: DateRange | undefined) => void;
|
|
31
|
+
/** Ready ranges listed before the calendar, such as the last 30 days. */
|
|
32
|
+
presets?: readonly DatePreset[];
|
|
33
|
+
placeholder?: string;
|
|
34
|
+
'aria-label'?: string;
|
|
35
|
+
className?: string;
|
|
36
|
+
};
|
|
37
|
+
/** Last 7, 30 and 90 days, ending today. */
|
|
38
|
+
export declare function defaultDatePresets(locale: 'tr' | 'en'): DatePreset[];
|
|
39
|
+
/**
|
|
40
|
+
* A from–to range with ready presets first, since nobody should fight a grid
|
|
41
|
+
* for "the last 30 days"; the calendar is there for anything else.
|
|
42
|
+
*/
|
|
43
|
+
export declare function DateRangePicker({ value, onValueChange, presets, placeholder, className, ...props }: DateRangePickerProps): import("react").JSX.Element;
|
|
44
|
+
//# sourceMappingURL=calendar.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"calendar.d.ts","sourceRoot":"","sources":["../../src/components/calendar.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAY,KAAK,cAAc,EAAE,MAAM,OAAO,CAAC;AACtD,OAAO,EAAE,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAM7D,YAAY,EAAE,SAAS,EAAE,CAAC;AAE1B,MAAM,MAAM,aAAa,GAAG,cAAc,CAAC,OAAO,SAAS,CAAC,CAAC;AAE7D;;;;GAIG;AACH,wBAAgB,QAAQ,CAAC,EAAE,SAAS,EAAE,UAAU,EAAE,GAAG,KAAK,EAAE,EAAE,aAAa,+BAkD1E;AAeD,MAAM,MAAM,eAAe,GAAG;IAC5B,KAAK,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB,aAAa,EAAE,CAAC,KAAK,EAAE,IAAI,GAAG,IAAI,KAAK,IAAI,CAAC;IAC5C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,oDAAoD;IACpD,GAAG,CAAC,EAAE,IAAI,CAAC;IACX,GAAG,CAAC,EAAE,IAAI,CAAC;IACX,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,qEAAqE;AACrE,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,aAAa,EACb,WAAW,EACX,GAAG,EACH,GAAG,EACH,SAAS,EACT,GAAG,KAAK,EACT,EAAE,eAAe,+BA8BjB;AAED,MAAM,MAAM,UAAU,GAAG;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,SAAS,CAAA;CAAE,CAAC;AAEnE,MAAM,MAAM,oBAAoB,GAAG;IACjC,KAAK,EAAE,SAAS,GAAG,SAAS,CAAC;IAC7B,aAAa,EAAE,CAAC,KAAK,EAAE,SAAS,GAAG,SAAS,KAAK,IAAI,CAAC;IACtD,yEAAyE;IACzE,OAAO,CAAC,EAAE,SAAS,UAAU,EAAE,CAAC;IAChC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AASF,4CAA4C;AAC5C,wBAAgB,kBAAkB,CAAC,MAAM,EAAE,IAAI,GAAG,IAAI,GAAG,UAAU,EAAE,CAMpE;AAED;;;GAGG;AACH,wBAAgB,eAAe,CAAC,EAC9B,KAAK,EACL,aAAa,EACb,OAAO,EACP,WAAW,EACX,SAAS,EACT,GAAG,KAAK,EACT,EAAE,oBAAoB,+BA+CtB"}
|
|
@@ -0,0 +1,93 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
+
import { CalendarDays, ChevronLeft, ChevronRight } from 'lucide-react';
|
|
4
|
+
import { useState } from 'react';
|
|
5
|
+
import { DayPicker } from 'react-day-picker';
|
|
6
|
+
import { enUS, tr } from 'react-day-picker/locale';
|
|
7
|
+
import { cn } from '../lib/cn.js';
|
|
8
|
+
import { useSkylcn } from '../lib/provider.js';
|
|
9
|
+
import { Popover, PopoverContent, PopoverTrigger } from './popover.js';
|
|
10
|
+
/**
|
|
11
|
+
* A month grid for picking a day or a range, in the reader's language with
|
|
12
|
+
* weeks starting on Monday for Turkish. Arrow keys move by day, PageUp and
|
|
13
|
+
* PageDown by month.
|
|
14
|
+
*/
|
|
15
|
+
export function Calendar({ className, classNames, ...props }) {
|
|
16
|
+
const { locale } = useSkylcn();
|
|
17
|
+
return (_jsx(DayPicker, { locale: locale === 'tr' ? tr : enUS, showOutsideDays: true, className: cn('w-fit p-1 text-xs', className), classNames: {
|
|
18
|
+
months: 'relative flex flex-col gap-4 sm:flex-row',
|
|
19
|
+
month: 'flex flex-col gap-3',
|
|
20
|
+
month_caption: 'flex h-8 items-center justify-center',
|
|
21
|
+
caption_label: 'text-sm font-medium text-foreground',
|
|
22
|
+
nav: 'absolute inset-x-0 top-0 flex h-8 items-center justify-between',
|
|
23
|
+
button_previous: 'grid size-8 place-items-center rounded-md text-subtle-foreground outline-hidden hover:bg-accent hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-30',
|
|
24
|
+
button_next: 'grid size-8 place-items-center rounded-md text-subtle-foreground outline-hidden hover:bg-accent hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-30',
|
|
25
|
+
month_grid: 'border-collapse',
|
|
26
|
+
weekdays: 'flex',
|
|
27
|
+
weekday: 'w-9 pb-1 text-center text-3xs font-medium tracking-wide text-subtle-foreground uppercase',
|
|
28
|
+
week: 'mt-0.5 flex',
|
|
29
|
+
day: 'group/day relative size-9 p-0 text-center pointer-coarse:size-10',
|
|
30
|
+
day_button: cn('relative z-10 grid size-9 place-items-center rounded-md text-secondary-foreground tabular-nums outline-hidden pointer-coarse:size-10', 'transition-colors duration-(--motion-duration-instant) hover:bg-accent hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring', 'group-data-[selected=true]/day:bg-primary group-data-[selected=true]/day:text-primary-foreground group-data-[selected=true]/day:hover:bg-primary'),
|
|
31
|
+
today: "after:absolute after:bottom-1.5 after:left-1/2 after:z-20 after:h-0.5 after:w-3 after:-translate-x-1/2 after:rounded-full after:bg-skylab-400 after:content-['']",
|
|
32
|
+
outside: 'text-faint-foreground [&>button]:text-faint-foreground',
|
|
33
|
+
disabled: 'opacity-40 [&>button]:cursor-not-allowed [&>button]:hover:bg-transparent',
|
|
34
|
+
range_start: 'rounded-l-md bg-skylab-500/15',
|
|
35
|
+
range_middle: 'bg-skylab-500/15 [&>button]:bg-transparent! [&>button]:text-foreground! [&>button]:hover:bg-skylab-500/10!',
|
|
36
|
+
range_end: 'rounded-r-md bg-skylab-500/15',
|
|
37
|
+
hidden: 'invisible',
|
|
38
|
+
...classNames,
|
|
39
|
+
}, components: {
|
|
40
|
+
Chevron: ({ orientation }) => orientation === 'left' ? (_jsx(ChevronLeft, { className: "size-4" })) : (_jsx(ChevronRight, { className: "size-4" })),
|
|
41
|
+
}, ...props }));
|
|
42
|
+
}
|
|
43
|
+
function useDateFormat() {
|
|
44
|
+
const { locale } = useSkylcn();
|
|
45
|
+
const tag = locale === 'tr' ? 'tr-TR' : 'en-US';
|
|
46
|
+
return (date) => date.toLocaleDateString(tag, { day: 'numeric', month: 'long', year: 'numeric' });
|
|
47
|
+
}
|
|
48
|
+
const triggerClass = cn('flex h-9 w-full items-center gap-2 rounded-md border border-input bg-input-background px-2.5 text-left text-xs text-foreground outline-hidden', 'transition-[border-color] duration-(--motion-duration-fast) hover:border-border-strong focus-visible:border-skylab-400/50 focus-visible:ring-2 focus-visible:ring-skylab-400/20', 'data-popup-open:border-skylab-400/50 pointer-coarse:h-11 pointer-coarse:text-base');
|
|
49
|
+
/** A field that opens a calendar and closes once a day is picked. */
|
|
50
|
+
export function DatePicker({ value, onValueChange, placeholder, min, max, className, ...props }) {
|
|
51
|
+
const [open, setOpen] = useState(false);
|
|
52
|
+
const format = useDateFormat();
|
|
53
|
+
const { messages } = useSkylcn();
|
|
54
|
+
return (_jsxs(Popover, { open: open, onOpenChange: setOpen, children: [_jsxs(PopoverTrigger, { id: props.id, "aria-label": props['aria-label'], className: cn(triggerClass, className), children: [_jsx(CalendarDays, { className: "size-3.5 shrink-0 text-subtle-foreground" }), _jsx("span", { className: cn('truncate', !value && 'text-subtle-foreground'), children: value ? format(value) : (placeholder ?? messages.pickDate) })] }), _jsx(PopoverContent, { align: "start", className: "w-auto p-2", children: _jsx(Calendar, { mode: "single", selected: value ?? undefined, defaultMonth: value ?? undefined, disabled: [...(min ? [{ before: min }] : []), ...(max ? [{ after: max }] : [])], onSelect: (day) => {
|
|
55
|
+
onValueChange(day ?? null);
|
|
56
|
+
if (day)
|
|
57
|
+
setOpen(false);
|
|
58
|
+
} }) })] }));
|
|
59
|
+
}
|
|
60
|
+
const daysAgo = (n) => {
|
|
61
|
+
const date = new Date();
|
|
62
|
+
date.setHours(0, 0, 0, 0);
|
|
63
|
+
date.setDate(date.getDate() - n);
|
|
64
|
+
return date;
|
|
65
|
+
};
|
|
66
|
+
/** Last 7, 30 and 90 days, ending today. */
|
|
67
|
+
export function defaultDatePresets(locale) {
|
|
68
|
+
const today = () => daysAgo(0);
|
|
69
|
+
return [7, 30, 90].map((n) => ({
|
|
70
|
+
label: locale === 'tr' ? `Son ${n} gün` : `Last ${n} days`,
|
|
71
|
+
range: () => ({ from: daysAgo(n - 1), to: today() }),
|
|
72
|
+
}));
|
|
73
|
+
}
|
|
74
|
+
/**
|
|
75
|
+
* A from–to range with ready presets first, since nobody should fight a grid
|
|
76
|
+
* for "the last 30 days"; the calendar is there for anything else.
|
|
77
|
+
*/
|
|
78
|
+
export function DateRangePicker({ value, onValueChange, presets, placeholder, className, ...props }) {
|
|
79
|
+
const { locale, messages } = useSkylcn();
|
|
80
|
+
const [open, setOpen] = useState(false);
|
|
81
|
+
const format = useDateFormat();
|
|
82
|
+
const list = presets ?? defaultDatePresets(locale);
|
|
83
|
+
const label = value?.from
|
|
84
|
+
? value.to
|
|
85
|
+
? `${format(value.from)} – ${format(value.to)}`
|
|
86
|
+
: format(value.from)
|
|
87
|
+
: (placeholder ?? messages.pickRange);
|
|
88
|
+
return (_jsxs(Popover, { open: open, onOpenChange: setOpen, children: [_jsxs(PopoverTrigger, { "aria-label": props['aria-label'] ? `${props['aria-label']}, ${label}` : undefined, className: cn(triggerClass, className), children: [_jsx(CalendarDays, { className: "size-3.5 shrink-0 text-subtle-foreground" }), _jsx("span", { className: cn('truncate', !value?.from && 'text-subtle-foreground'), children: label })] }), _jsxs(PopoverContent, { align: "start", className: "flex w-auto flex-col gap-2 p-2 sm:flex-row", children: [_jsx("ul", { className: "flex flex-row flex-wrap gap-1 sm:w-32 sm:flex-col", children: list.map((preset) => (_jsx("li", { children: _jsx("button", { type: "button", onClick: () => {
|
|
89
|
+
onValueChange(preset.range());
|
|
90
|
+
setOpen(false);
|
|
91
|
+
}, className: "w-full rounded-md px-2 py-1.5 text-left text-xs text-secondary-foreground outline-hidden hover:bg-accent hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring", children: preset.label }) }, preset.label))) }), _jsx("div", { className: "border-t border-border-subtle pt-2 sm:border-t-0 sm:border-l sm:pt-0 sm:pl-2", children: _jsx(Calendar, { mode: "range", selected: value, defaultMonth: value?.from, onSelect: onValueChange }) })] })] }));
|
|
92
|
+
}
|
|
93
|
+
//# sourceMappingURL=calendar.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"calendar.js","sourceRoot":"","sources":["../../src/components/calendar.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,YAAY,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AACvE,OAAO,EAAE,QAAQ,EAAuB,MAAM,OAAO,CAAC;AACtD,OAAO,EAAE,SAAS,EAAkB,MAAM,kBAAkB,CAAC;AAC7D,OAAO,EAAE,IAAI,EAAE,EAAE,EAAE,MAAM,yBAAyB,CAAC;AACnD,OAAO,EAAE,EAAE,EAAE,MAAM,cAAc,CAAC;AAClC,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC/C,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAMvE;;;;GAIG;AACH,MAAM,UAAU,QAAQ,CAAC,EAAE,SAAS,EAAE,UAAU,EAAE,GAAG,KAAK,EAAiB;IACzE,MAAM,EAAE,MAAM,EAAE,GAAG,SAAS,EAAE,CAAC;IAC/B,OAAO,CACL,KAAC,SAAS,IACR,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,EACnC,eAAe,QACf,SAAS,EAAE,EAAE,CAAC,mBAAmB,EAAE,SAAS,CAAC,EAC7C,UAAU,EAAE;YACV,MAAM,EAAE,0CAA0C;YAClD,KAAK,EAAE,qBAAqB;YAC5B,aAAa,EAAE,sCAAsC;YACrD,aAAa,EAAE,qCAAqC;YACpD,GAAG,EAAE,gEAAgE;YACrE,eAAe,EACb,wLAAwL;YAC1L,WAAW,EACT,wLAAwL;YAC1L,UAAU,EAAE,iBAAiB;YAC7B,QAAQ,EAAE,MAAM;YAChB,OAAO,EACL,0FAA0F;YAC5F,IAAI,EAAE,aAAa;YACnB,GAAG,EAAE,kEAAkE;YACvE,UAAU,EAAE,EAAE,CACZ,sIAAsI,EACtI,2IAA2I,EAC3I,kJAAkJ,CACnJ;YACD,KAAK,EACH,kKAAkK;YACpK,OAAO,EAAE,wDAAwD;YACjE,QAAQ,EAAE,0EAA0E;YACpF,WAAW,EAAE,+BAA+B;YAC5C,YAAY,EACV,4GAA4G;YAC9G,SAAS,EAAE,+BAA+B;YAC1C,MAAM,EAAE,WAAW;YACnB,GAAG,UAAU;SACd,EACD,UAAU,EAAE;YACV,OAAO,EAAE,CAAC,EAAE,WAAW,EAAE,EAAE,EAAE,CAC3B,WAAW,KAAK,MAAM,CAAC,CAAC,CAAC,CACvB,KAAC,WAAW,IAAC,SAAS,EAAC,QAAQ,GAAG,CACnC,CAAC,CAAC,CAAC,CACF,KAAC,YAAY,IAAC,SAAS,EAAC,QAAQ,GAAG,CACpC;SACJ,KACG,KAAK,GACT,CACH,CAAC;AACJ,CAAC;AAED,SAAS,aAAa;IACpB,MAAM,EAAE,MAAM,EAAE,GAAG,SAAS,EAAE,CAAC;IAC/B,MAAM,GAAG,GAAG,MAAM,KAAK,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC;IAChD,OAAO,CAAC,IAAU,EAAE,EAAE,CACpB,IAAI,CAAC,kBAAkB,CAAC,GAAG,EAAE,EAAE,GAAG,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC,CAAC;AACrF,CAAC;AAED,MAAM,YAAY,GAAG,EAAE,CACrB,+IAA+I,EAC/I,iLAAiL,EACjL,mFAAmF,CACpF,CAAC;AAcF,qEAAqE;AACrE,MAAM,UAAU,UAAU,CAAC,EACzB,KAAK,EACL,aAAa,EACb,WAAW,EACX,GAAG,EACH,GAAG,EACH,SAAS,EACT,GAAG,KAAK,EACQ;IAChB,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACxC,MAAM,MAAM,GAAG,aAAa,EAAE,CAAC;IAC/B,MAAM,EAAE,QAAQ,EAAE,GAAG,SAAS,EAAE,CAAC;IACjC,OAAO,CACL,MAAC,OAAO,IAAC,IAAI,EAAE,IAAI,EAAE,YAAY,EAAE,OAAO,aACxC,MAAC,cAAc,IACb,EAAE,EAAE,KAAK,CAAC,EAAE,gBACA,KAAK,CAAC,YAAY,CAAC,EAC/B,SAAS,EAAE,EAAE,CAAC,YAAY,EAAE,SAAS,CAAC,aAEtC,KAAC,YAAY,IAAC,SAAS,EAAC,0CAA0C,GAAG,EACrE,eAAM,SAAS,EAAE,EAAE,CAAC,UAAU,EAAE,CAAC,KAAK,IAAI,wBAAwB,CAAC,YAChE,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,WAAW,IAAI,QAAQ,CAAC,QAAQ,CAAC,GACtD,IACQ,EACjB,KAAC,cAAc,IAAC,KAAK,EAAC,OAAO,EAAC,SAAS,EAAC,YAAY,YAClD,KAAC,QAAQ,IACP,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,KAAK,IAAI,SAAS,EAC5B,YAAY,EAAE,KAAK,IAAI,SAAS,EAChC,QAAQ,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,EAAE,MAAM,EAAE,GAAG,EAAE,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,GAAG,EAAE,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,EAC/E,QAAQ,EAAE,CAAC,GAAG,EAAE,EAAE;wBAChB,aAAa,CAAC,GAAG,IAAI,IAAI,CAAC,CAAC;wBAC3B,IAAI,GAAG;4BAAE,OAAO,CAAC,KAAK,CAAC,CAAC;oBAC1B,CAAC,GACD,GACa,IACT,CACX,CAAC;AACJ,CAAC;AAcD,MAAM,OAAO,GAAG,CAAC,CAAS,EAAE,EAAE;IAC5B,MAAM,IAAI,GAAG,IAAI,IAAI,EAAE,CAAC;IACxB,IAAI,CAAC,QAAQ,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;IAC1B,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC,CAAC;IACjC,OAAO,IAAI,CAAC;AACd,CAAC,CAAC;AAEF,4CAA4C;AAC5C,MAAM,UAAU,kBAAkB,CAAC,MAAmB;IACpD,MAAM,KAAK,GAAG,GAAG,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;IAC/B,OAAO,CAAC,CAAC,EAAE,EAAE,EAAE,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC;QAC7B,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,OAAO;QAC1D,KAAK,EAAE,GAAG,EAAE,CAAC,CAAC,EAAE,IAAI,EAAE,OAAO,CAAC,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,CAAC;KACrD,CAAC,CAAC,CAAC;AACN,CAAC;AAED;;;GAGG;AACH,MAAM,UAAU,eAAe,CAAC,EAC9B,KAAK,EACL,aAAa,EACb,OAAO,EACP,WAAW,EACX,SAAS,EACT,GAAG,KAAK,EACa;IACrB,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,GAAG,SAAS,EAAE,CAAC;IACzC,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACxC,MAAM,MAAM,GAAG,aAAa,EAAE,CAAC;IAC/B,MAAM,IAAI,GAAG,OAAO,IAAI,kBAAkB,CAAC,MAAM,CAAC,CAAC;IACnD,MAAM,KAAK,GAAG,KAAK,EAAE,IAAI;QACvB,CAAC,CAAC,KAAK,CAAC,EAAE;YACR,CAAC,CAAC,GAAG,MAAM,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,MAAM,CAAC,KAAK,CAAC,EAAE,CAAC,EAAE;YAC/C,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,IAAI,CAAC;QACtB,CAAC,CAAC,CAAC,WAAW,IAAI,QAAQ,CAAC,SAAS,CAAC,CAAC;IACxC,OAAO,CACL,MAAC,OAAO,IAAC,IAAI,EAAE,IAAI,EAAE,YAAY,EAAE,OAAO,aACxC,MAAC,cAAc,kBACD,KAAK,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,YAAY,CAAC,KAAK,KAAK,EAAE,CAAC,CAAC,CAAC,SAAS,EAChF,SAAS,EAAE,EAAE,CAAC,YAAY,EAAE,SAAS,CAAC,aAEtC,KAAC,YAAY,IAAC,SAAS,EAAC,0CAA0C,GAAG,EACrE,eAAM,SAAS,EAAE,EAAE,CAAC,UAAU,EAAE,CAAC,KAAK,EAAE,IAAI,IAAI,wBAAwB,CAAC,YAAG,KAAK,GAAQ,IAC1E,EACjB,MAAC,cAAc,IAAC,KAAK,EAAC,OAAO,EAAC,SAAS,EAAC,4CAA4C,aAClF,aAAI,SAAS,EAAC,mDAAmD,YAC9D,IAAI,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CACpB,uBACE,iBACE,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,GAAG,EAAE;oCACZ,aAAa,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,CAAC;oCAC9B,OAAO,CAAC,KAAK,CAAC,CAAC;gCACjB,CAAC,EACD,SAAS,EAAC,6KAA6K,YAEtL,MAAM,CAAC,KAAK,GACN,IAVF,MAAM,CAAC,KAAK,CAWhB,CACN,CAAC,GACC,EACL,cAAK,SAAS,EAAC,8EAA8E,YAC3F,KAAC,QAAQ,IACP,IAAI,EAAC,OAAO,EACZ,QAAQ,EAAE,KAAK,EACf,YAAY,EAAE,KAAK,EAAE,IAAI,EACzB,QAAQ,EAAE,aAAa,GACvB,GACE,IACS,IACT,CACX,CAAC;AACJ,CAAC"}
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
import type { LucideIcon } from 'lucide-react';
|
|
2
|
+
import type { ComponentProps, ReactNode } from 'react';
|
|
3
|
+
/** A framed surface for one piece of content: a summary, a form section, a chart. */
|
|
4
|
+
export declare function Card({ className, ...props }: ComponentProps<'div'>): import("react").JSX.Element;
|
|
5
|
+
export declare function CardHeader({ className, ...props }: ComponentProps<'div'>): import("react").JSX.Element;
|
|
6
|
+
export type CardTitleProps = ComponentProps<'h2'> & {
|
|
7
|
+
/** The heading level; 2 under a page title, 3 inside a section that has its own. */
|
|
8
|
+
level?: 2 | 3 | 4;
|
|
9
|
+
};
|
|
10
|
+
export declare function CardTitle({ level, className, ...props }: CardTitleProps): import("react").JSX.Element;
|
|
11
|
+
export declare function CardDescription({ className, ...props }: ComponentProps<'p'>): import("react").JSX.Element;
|
|
12
|
+
/** Buttons or a menu at the end of the header row. */
|
|
13
|
+
export declare function CardAction({ className, ...props }: ComponentProps<'div'>): import("react").JSX.Element;
|
|
14
|
+
export declare function CardContent({ className, ...props }: ComponentProps<'div'>): import("react").JSX.Element;
|
|
15
|
+
export declare function CardFooter({ className, ...props }: ComponentProps<'div'>): import("react").JSX.Element;
|
|
16
|
+
declare const DELTA_TONE: {
|
|
17
|
+
readonly positive: "text-success";
|
|
18
|
+
readonly negative: "text-destructive";
|
|
19
|
+
readonly neutral: "text-muted-foreground";
|
|
20
|
+
};
|
|
21
|
+
export type StatCardProps = {
|
|
22
|
+
label: ReactNode;
|
|
23
|
+
value: ReactNode;
|
|
24
|
+
icon?: LucideIcon;
|
|
25
|
+
/** A change next to the value, such as "+12". */
|
|
26
|
+
delta?: ReactNode;
|
|
27
|
+
/** Whether the change is good news; a drop in errors is positive. */
|
|
28
|
+
deltaTone?: keyof typeof DELTA_TONE;
|
|
29
|
+
/** A line under the value, such as the period it covers. */
|
|
30
|
+
hint?: ReactNode;
|
|
31
|
+
/** Recent figures, oldest first, drawn as a sparkline under the value. */
|
|
32
|
+
trend?: readonly number[];
|
|
33
|
+
className?: string;
|
|
34
|
+
};
|
|
35
|
+
/** One figure for a dashboard row: a label, a large value, and how it moved. */
|
|
36
|
+
export declare function StatCard({ label, value, icon: Icon, delta, deltaTone, hint, trend, className, }: StatCardProps): import("react").JSX.Element;
|
|
37
|
+
export {};
|
|
38
|
+
//# sourceMappingURL=card.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"card.d.ts","sourceRoot":"","sources":["../../src/components/card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC/C,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAKvD,qFAAqF;AACrF,wBAAgB,IAAI,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,CAAC,KAAK,CAAC,+BAWlE;AAED,wBAAgB,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,CAAC,KAAK,CAAC,+BAQxE;AAED,MAAM,MAAM,cAAc,GAAG,cAAc,CAAC,IAAI,CAAC,GAAG;IAClD,oFAAoF;IACpF,KAAK,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;CACnB,CAAC;AAEF,wBAAgB,SAAS,CAAC,EAAE,KAAS,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,+BAS3E;AAED,wBAAgB,eAAe,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,CAAC,GAAG,CAAC,+BAQ3E;AAED,sDAAsD;AACtD,wBAAgB,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,CAAC,KAAK,CAAC,+BAQxE;AAED,wBAAgB,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,CAAC,KAAK,CAAC,+BAEzE;AAED,wBAAgB,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,CAAC,KAAK,CAAC,+BAWxE;AAED,QAAA,MAAM,UAAU;;;;CAIN,CAAC;AAEX,MAAM,MAAM,aAAa,GAAG;IAC1B,KAAK,EAAE,SAAS,CAAC;IACjB,KAAK,EAAE,SAAS,CAAC;IACjB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,iDAAiD;IACjD,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,qEAAqE;IACrE,SAAS,CAAC,EAAE,MAAM,OAAO,UAAU,CAAC;IACpC,4DAA4D;IAC5D,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,0EAA0E;IAC1E,KAAK,CAAC,EAAE,SAAS,MAAM,EAAE,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,gFAAgF;AAChF,wBAAgB,QAAQ,CAAC,EACvB,KAAK,EACL,KAAK,EACL,IAAI,EAAE,IAAI,EACV,KAAK,EACL,SAAqB,EACrB,IAAI,EACJ,KAAK,EACL,SAAS,GACV,EAAE,aAAa,+BAuBf"}
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { cn } from '../lib/cn.js';
|
|
3
|
+
import { AnimatedNumber } from './motion.js';
|
|
4
|
+
import { Sparkline } from './sparkline.js';
|
|
5
|
+
/** A framed surface for one piece of content: a summary, a form section, a chart. */
|
|
6
|
+
export function Card({ className, ...props }) {
|
|
7
|
+
return (_jsx("div", { "data-slot": "card", className: cn('flex min-w-0 flex-col rounded-xl border border-border bg-card text-card-foreground', className), ...props }));
|
|
8
|
+
}
|
|
9
|
+
export function CardHeader({ className, ...props }) {
|
|
10
|
+
return (_jsx("div", { "data-slot": "card-header", className: cn('flex min-w-0 items-start gap-3 px-4 pt-4', className), ...props }));
|
|
11
|
+
}
|
|
12
|
+
export function CardTitle({ level = 2, className, ...props }) {
|
|
13
|
+
const Heading = `h${level}`;
|
|
14
|
+
return (_jsx(Heading, { "data-slot": "card-title", className: cn('text-sm font-semibold text-foreground', className), ...props }));
|
|
15
|
+
}
|
|
16
|
+
export function CardDescription({ className, ...props }) {
|
|
17
|
+
return (_jsx("p", { "data-slot": "card-description", className: cn('mt-0.5 text-xs text-muted-foreground', className), ...props }));
|
|
18
|
+
}
|
|
19
|
+
/** Buttons or a menu at the end of the header row. */
|
|
20
|
+
export function CardAction({ className, ...props }) {
|
|
21
|
+
return (_jsx("div", { "data-slot": "card-action", className: cn('ml-auto flex shrink-0 items-center gap-1', className), ...props }));
|
|
22
|
+
}
|
|
23
|
+
export function CardContent({ className, ...props }) {
|
|
24
|
+
return _jsx("div", { "data-slot": "card-content", className: cn('min-w-0 p-4', className), ...props });
|
|
25
|
+
}
|
|
26
|
+
export function CardFooter({ className, ...props }) {
|
|
27
|
+
return (_jsx("div", { "data-slot": "card-footer", className: cn('mt-auto flex items-center gap-2 border-t border-border-subtle px-4 py-3', className), ...props }));
|
|
28
|
+
}
|
|
29
|
+
const DELTA_TONE = {
|
|
30
|
+
positive: 'text-success',
|
|
31
|
+
negative: 'text-destructive',
|
|
32
|
+
neutral: 'text-muted-foreground',
|
|
33
|
+
};
|
|
34
|
+
/** One figure for a dashboard row: a label, a large value, and how it moved. */
|
|
35
|
+
export function StatCard({ label, value, icon: Icon, delta, deltaTone = 'neutral', hint, trend, className, }) {
|
|
36
|
+
return (_jsxs(Card, { "data-slot": "stat-card", className: cn('gap-2 p-4', className), children: [_jsxs("div", { className: "flex items-center gap-2", children: [Icon ? _jsx(Icon, { className: "size-3.5 text-subtle-foreground" }) : null, _jsx("p", { className: "text-3xs font-medium tracking-label text-subtle-foreground uppercase", children: label })] }), _jsxs("div", { className: "flex items-baseline gap-2", children: [_jsx("p", { className: "text-2xl font-semibold text-foreground", children: typeof value === 'number' ? _jsx(AnimatedNumber, { value: value }) : value }), delta ? (_jsx("span", { className: cn('text-xs font-medium tabular-nums', DELTA_TONE[deltaTone]), children: delta })) : null] }), hint ? _jsx("p", { className: "text-2xs text-muted-foreground", children: hint }) : null, trend ? _jsx(Sparkline, { values: trend, className: "mt-1" }) : null] }));
|
|
37
|
+
}
|
|
38
|
+
//# sourceMappingURL=card.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"card.js","sourceRoot":"","sources":["../../src/components/card.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
import { type ReactNode } from 'react';
|
|
2
|
+
export type CarouselProps = {
|
|
3
|
+
/** Names the carousel, such as "Etkinlik fotoğrafları". */
|
|
4
|
+
'aria-label': string;
|
|
5
|
+
children: ReactNode;
|
|
6
|
+
/** Width of each slide, such as "85%" on phones or "20rem". */
|
|
7
|
+
slideWidth?: string;
|
|
8
|
+
className?: string;
|
|
9
|
+
};
|
|
10
|
+
/**
|
|
11
|
+
* A row of slides that snaps as it scrolls: swiped on touch, stepped with the
|
|
12
|
+
* buttons, dots or arrow keys. Scrolling itself moves it, so nothing
|
|
13
|
+
* auto-plays or moves under the reader's pointer.
|
|
14
|
+
*/
|
|
15
|
+
export declare function Carousel({ 'aria-label': label, children, slideWidth, className, }: CarouselProps): import("react").JSX.Element;
|
|
16
|
+
export type KanbanColumn = {
|
|
17
|
+
id: string;
|
|
18
|
+
title: string;
|
|
19
|
+
};
|
|
20
|
+
export type KanbanCard = {
|
|
21
|
+
id: string;
|
|
22
|
+
column: string;
|
|
23
|
+
title: ReactNode;
|
|
24
|
+
meta?: ReactNode;
|
|
25
|
+
};
|
|
26
|
+
export type KanbanProps = {
|
|
27
|
+
columns: readonly KanbanColumn[];
|
|
28
|
+
cards: readonly KanbanCard[];
|
|
29
|
+
/** Called with the card and its new column; the parent moves it. */
|
|
30
|
+
onMove: (cardId: string, column: string) => void;
|
|
31
|
+
'aria-label': string;
|
|
32
|
+
/** Level of the column headings, one below the heading above the board. */
|
|
33
|
+
headingLevel?: 2 | 3 | 4;
|
|
34
|
+
className?: string;
|
|
35
|
+
};
|
|
36
|
+
/**
|
|
37
|
+
* Cards in columns, such as event preparation tasks. Dragging moves a card
|
|
38
|
+
* with the mouse, and every card also has a "Move" menu, so touch and
|
|
39
|
+
* keyboard readers never need to drag.
|
|
40
|
+
*/
|
|
41
|
+
export declare function Kanban({ columns, cards, onMove, 'aria-label': label, headingLevel, className, }: KanbanProps): import("react").JSX.Element;
|
|
42
|
+
//# sourceMappingURL=carousel.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"carousel.d.ts","sourceRoot":"","sources":["../../src/components/carousel.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAyC,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAS9E,MAAM,MAAM,aAAa,GAAG;IAC1B,2DAA2D;IAC3D,YAAY,EAAE,MAAM,CAAC;IACrB,QAAQ,EAAE,SAAS,CAAC;IACpB,+DAA+D;IAC/D,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF;;;;GAIG;AACH,wBAAgB,QAAQ,CAAC,EACvB,YAAY,EAAE,KAAK,EACnB,QAAQ,EACR,UAA8B,EAC9B,SAAS,GACV,EAAE,aAAa,+BA+Gf;AAID,MAAM,MAAM,YAAY,GAAG;IAAE,EAAE,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAAC;AACzD,MAAM,MAAM,UAAU,GAAG;IAAE,EAAE,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,SAAS,CAAC;IAAC,IAAI,CAAC,EAAE,SAAS,CAAA;CAAE,CAAC;AAE5F,MAAM,MAAM,WAAW,GAAG;IACxB,OAAO,EAAE,SAAS,YAAY,EAAE,CAAC;IACjC,KAAK,EAAE,SAAS,UAAU,EAAE,CAAC;IAC7B,oEAAoE;IACpE,MAAM,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACjD,YAAY,EAAE,MAAM,CAAC;IACrB,2EAA2E;IAC3E,YAAY,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF;;;;GAIG;AACH,wBAAgB,MAAM,CAAC,EACrB,OAAO,EACP,KAAK,EACL,MAAM,EACN,YAAY,EAAE,KAAK,EACnB,YAAgB,EAChB,SAAS,GACV,EAAE,WAAW,+BA+Gb"}
|
|
@@ -0,0 +1,92 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
+
import { ArrowRightLeft, ChevronLeft, ChevronRight, GripVertical } from 'lucide-react';
|
|
4
|
+
import { LayoutGroup, m } from 'motion/react';
|
|
5
|
+
import { Children, useEffect, useRef, useState } from 'react';
|
|
6
|
+
import { cn } from '../lib/cn.js';
|
|
7
|
+
import { transitions } from '../lib/motion-tokens.js';
|
|
8
|
+
import { useSkylcn } from '../lib/provider.js';
|
|
9
|
+
import { IconButton } from './button.js';
|
|
10
|
+
import { DropdownMenu, DropdownMenuContent, DropdownMenuTrigger, MenuItem } from './menu.js';
|
|
11
|
+
/**
|
|
12
|
+
* A row of slides that snaps as it scrolls: swiped on touch, stepped with the
|
|
13
|
+
* buttons, dots or arrow keys. Scrolling itself moves it, so nothing
|
|
14
|
+
* auto-plays or moves under the reader's pointer.
|
|
15
|
+
*/
|
|
16
|
+
export function Carousel({ 'aria-label': label, children, slideWidth = 'min(85%, 22rem)', className, }) {
|
|
17
|
+
const { messages } = useSkylcn();
|
|
18
|
+
const track = useRef(null);
|
|
19
|
+
const slides = Children.toArray(children);
|
|
20
|
+
const [index, setIndex] = useState(0);
|
|
21
|
+
const [atEnd, setAtEnd] = useState(false);
|
|
22
|
+
// The current slide is the one whose start is nearest the scroll position
|
|
23
|
+
const sync = () => {
|
|
24
|
+
const el = track.current;
|
|
25
|
+
if (!el)
|
|
26
|
+
return;
|
|
27
|
+
let nearest = 0;
|
|
28
|
+
let best = Infinity;
|
|
29
|
+
el.querySelectorAll('[data-index]').forEach((slide) => {
|
|
30
|
+
const distance = Math.abs(slide.offsetLeft - el.offsetLeft - el.scrollLeft);
|
|
31
|
+
if (distance < best) {
|
|
32
|
+
best = distance;
|
|
33
|
+
nearest = Number(slide.dataset.index);
|
|
34
|
+
}
|
|
35
|
+
});
|
|
36
|
+
setIndex(nearest);
|
|
37
|
+
setAtEnd(el.scrollLeft + el.clientWidth >= el.scrollWidth - 2);
|
|
38
|
+
};
|
|
39
|
+
useEffect(() => {
|
|
40
|
+
sync();
|
|
41
|
+
}, [slides.length]);
|
|
42
|
+
const go = (i) => {
|
|
43
|
+
const target = track.current?.querySelector(`[data-index="${i}"]`);
|
|
44
|
+
target?.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'start' });
|
|
45
|
+
};
|
|
46
|
+
return (_jsxs("section", { "aria-roledescription": "carousel", "aria-label": label, "data-slot": "carousel", className: cn('flex flex-col gap-3', className), children: [_jsx("div", { ref: track, tabIndex: 0, onScroll: sync, onKeyDown: (event) => {
|
|
47
|
+
if (event.key === 'ArrowRight') {
|
|
48
|
+
event.preventDefault();
|
|
49
|
+
go(Math.min(index + 1, slides.length - 1));
|
|
50
|
+
}
|
|
51
|
+
else if (event.key === 'ArrowLeft') {
|
|
52
|
+
event.preventDefault();
|
|
53
|
+
go(Math.max(index - 1, 0));
|
|
54
|
+
}
|
|
55
|
+
}, className: "scrollbar-hidden flex snap-x snap-mandatory gap-3 overflow-x-auto scroll-smooth rounded-xl outline-hidden focus-visible:ring-2 focus-visible:ring-ring motion-reduce:scroll-auto", children: slides.map((slide, i) => (_jsx("div", { "data-index": i, role: "group", "aria-roledescription": "slide", "aria-label": messages.slideOf(i + 1, slides.length), className: "shrink-0 snap-start", style: { width: slideWidth }, children: slide }, i))) }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(IconButton, { icon: ChevronLeft, label: messages.previous, variant: "ghost", size: "icon-sm", disabled: index === 0, onClick: () => go(index - 1) }), _jsx("div", { className: "flex flex-1 justify-center", children: slides.map((_, i) => (_jsx("button", { type: "button", "aria-label": messages.slideOf(i + 1, slides.length), "aria-current": i === index ? 'true' : undefined, onClick: () => go(i), className: "group grid h-6 min-w-6 place-items-center rounded-full outline-hidden focus-visible:ring-2 focus-visible:ring-ring", children: _jsx("span", { className: cn('h-1.5 rounded-full transition-[width,background-color] duration-(--motion-duration-base) ease-enter', i === index
|
|
56
|
+
? 'w-5 bg-skylab-400'
|
|
57
|
+
: 'w-1.5 bg-border-strong group-hover:bg-subtle-foreground') }) }, i))) }), _jsx(IconButton, { icon: ChevronRight, label: messages.next, variant: "ghost", size: "icon-sm", disabled: atEnd || index === slides.length - 1, onClick: () => go(index + 1) })] })] }));
|
|
58
|
+
}
|
|
59
|
+
/**
|
|
60
|
+
* Cards in columns, such as event preparation tasks. Dragging moves a card
|
|
61
|
+
* with the mouse, and every card also has a "Move" menu, so touch and
|
|
62
|
+
* keyboard readers never need to drag.
|
|
63
|
+
*/
|
|
64
|
+
export function Kanban({ columns, cards, onMove, 'aria-label': label, headingLevel = 3, className, }) {
|
|
65
|
+
const { messages } = useSkylcn();
|
|
66
|
+
const Heading = `h${headingLevel}`;
|
|
67
|
+
const [dragging, setDragging] = useState(null);
|
|
68
|
+
const [over, setOver] = useState(null);
|
|
69
|
+
return (_jsx(LayoutGroup, { children: _jsx("div", { role: "region", "aria-label": label, "data-slot": "kanban", className: cn('grid scrollbar auto-cols-[minmax(16rem,1fr)] grid-flow-col gap-3 overflow-x-auto pb-2', className), children: columns.map((column) => {
|
|
70
|
+
const list = cards.filter((card) => card.column === column.id);
|
|
71
|
+
return (_jsxs("section", { "aria-label": column.title, onDragOver: (event) => {
|
|
72
|
+
event.preventDefault();
|
|
73
|
+
setOver(column.id);
|
|
74
|
+
}, onDragLeave: () => setOver((current) => (current === column.id ? null : current)), onDrop: (event) => {
|
|
75
|
+
event.preventDefault();
|
|
76
|
+
const id = event.dataTransfer.getData('text/plain');
|
|
77
|
+
if (id)
|
|
78
|
+
onMove(id, column.id);
|
|
79
|
+
setOver(null);
|
|
80
|
+
setDragging(null);
|
|
81
|
+
}, className: cn('flex min-h-40 flex-col gap-2 rounded-xl border border-border bg-card p-2 transition-colors duration-(--motion-duration-fast)', over === column.id && dragging && 'border-skylab-400/50 bg-skylab-500/5'), children: [_jsxs(Heading, { className: "flex items-center justify-between px-1.5 pt-1 text-xs font-semibold text-foreground", children: [column.title, _jsx("span", { className: "text-2xs font-normal text-subtle-foreground tabular-nums", children: list.length })] }), _jsx("ul", { className: "flex flex-col gap-2", children: list.map((card) => (_jsx("li", { draggable: true, onDragStart: (event) => {
|
|
82
|
+
event.dataTransfer.setData('text/plain', card.id);
|
|
83
|
+
setDragging(card.id);
|
|
84
|
+
}, onDragEnd: () => {
|
|
85
|
+
setDragging(null);
|
|
86
|
+
setOver(null);
|
|
87
|
+
}, className: cn('cursor-grab active:cursor-grabbing', dragging === card.id && 'opacity-50'), children: _jsxs(m.div, { layoutId: card.id, transition: { layout: transitions.layout }, className: "group flex items-start gap-2 rounded-lg border border-border bg-background p-2.5 text-sm shadow-sm", children: [_jsx(GripVertical, { className: "mt-0.5 size-3.5 shrink-0 text-faint-foreground", "aria-hidden": true }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("div", { className: "text-foreground", children: card.title }), card.meta ? (_jsx("div", { className: "mt-1 text-2xs text-muted-foreground", children: card.meta })) : null] }), _jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { render: _jsx(IconButton, { icon: ArrowRightLeft, label: messages.moveCard, variant: "ghost", size: "icon-sm" }) }), _jsx(DropdownMenuContent, { align: "end", children: columns
|
|
88
|
+
.filter((target) => target.id !== column.id)
|
|
89
|
+
.map((target) => (_jsx(MenuItem, { onClick: () => onMove(card.id, target.id), children: target.title }, target.id))) })] })] }) }, card.id))) })] }, column.id));
|
|
90
|
+
}) }) }));
|
|
91
|
+
}
|
|
92
|
+
//# sourceMappingURL=carousel.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"carousel.js","sourceRoot":"","sources":["../../src/components/carousel.tsx"],"names":[],"mappings":"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"}
|