@annatarhe/lake-ui 0.0.21 → 0.0.24

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.
@@ -0,0 +1,26 @@
1
+ import type { StorybookConfig } from '@storybook/react-vite'
2
+ import path from 'path'
3
+
4
+ const config: StorybookConfig = {
5
+ stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
6
+ addons: [
7
+ '@storybook/addon-essentials',
8
+ '@storybook/addon-onboarding',
9
+ '@storybook/addon-interactions',
10
+ ],
11
+ framework: {
12
+ name: '@storybook/react-vite',
13
+ options: {},
14
+ },
15
+ viteFinal: (config) => {
16
+ config.resolve = {
17
+ ...config.resolve,
18
+ alias: {
19
+ ...config.resolve?.alias,
20
+ '@': path.resolve('src'),
21
+ },
22
+ }
23
+ return config
24
+ },
25
+ }
26
+ export default config
@@ -0,0 +1,3 @@
1
+ <html class="dark dark:bg-gray-900">
2
+ <div data-st-role='modal'></div>
3
+ </html>
@@ -0,0 +1,4 @@
1
+ <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
2
+ <style type="text/tailwindcss">
3
+ @custom-variant dark (&:where(.dark, .dark *));
4
+ </style>
@@ -0,0 +1,14 @@
1
+ import type { Preview } from '@storybook/react'
2
+
3
+ const preview: Preview = {
4
+ parameters: {
5
+ controls: {
6
+ matchers: {
7
+ color: /(background|color)$/i,
8
+ date: /Date$/i,
9
+ },
10
+ },
11
+ },
12
+ }
13
+
14
+ export default preview
@@ -0,0 +1 @@
1
+ ._select_1ins3_2,._select_1ins3_2::picker(select){-webkit-appearance:base-select;-moz-appearance:base-select;appearance:base-select;cursor:pointer;max-height:200px;overflow-y:auto}._select_1ins3_2::picker(select)::-webkit-scrollbar{width:4px;background-color:transparent}._select_1ins3_2::picker(select)::-webkit-scrollbar-thumb{background-color:#9ca3af66;border-radius:8px;transition:background-color .2s ease}._select_1ins3_2::picker(select)::-webkit-scrollbar-thumb:hover{background-color:#9ca3af99}._select_1ins3_2::picker(select)::-webkit-scrollbar-track{background-color:#e5e7eb1a;border-radius:8px}._select_1ins3_2::picker(select-button){font-weight:400;padding:.5rem .75rem;border-radius:.375rem;transition:all .15s ease-in-out}._select_1ins3_2::picker(listbox){border-radius:.375rem;padding:.25rem 0;box-shadow:0 4px 20px #00000014;background-color:var(--select-listbox-background, #fff);border:1px solid rgba(0,0,0,.08);max-height:15rem;overflow-y:auto;margin-top:.25rem}._select_1ins3_2::picker(option-group){padding-left:.5rem}._select_1ins3_2::picker(group-label){font-size:.75rem;font-weight:600;color:var(--select-group-label-color, #6b7280);padding:.375rem .75rem;letter-spacing:.025em;text-transform:uppercase}._select_1ins3_2 option{padding:.5rem .75rem;font-size:.875rem;border-radius:.25rem;cursor:pointer;transition:background-color .15s ease}._select_1ins3_2 option:hover{background-color:#3b82f614}._select_1ins3_2 option:checked{background-color:#3b82f61f;color:#3b82f6;font-weight:500}@keyframes _spin_1ins3_1{0%{transform:rotate(0)}to{transform:rotate(360deg)}}._loading_1ins3_96::picker-icon{content:url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='currentColor'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%20class='lucide%20lucide-loader-circle-icon%20lucide-loader-circle'%3e%3cpath%20d='M21%2012a9%209%200%201%201-6.219-8.56'/%3e%3c/svg%3e");animation:_spin_1ins3_1 1.5s linear infinite;display:inline-block}._normal_1ins3_102::picker-icon{content:url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='currentColor'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%20class='lucide%20lucide-chevron-down-icon%20lucide-chevron-down'%3e%3cpath%20d='m6%209%206%206%206-6'/%3e%3c/svg%3e")}._select_1ins3_2::picker-icon{height:24px;width:24px;position:absolute;right:.75rem;--select-icon-color: #6b7280;color:var(--select-icon-color, #6b7280);transform-origin:center;transition:transform .2s ease}._select_1ins3_2:open::picker-icon{transform:rotate(180deg)}._select_1ins3_2:disabled{cursor:not-allowed;opacity:.6}@media (prefers-color-scheme: dark){._select_1ins3_2::picker(select){border:0;background-color:var(--color-gray-800)}._loading_1ins3_96::picker-icon{content:url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='white'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%20class='lucide%20lucide-loader-circle-icon%20lucide-loader-circle'%3e%3cpath%20d='M21%2012a9%209%200%201%201-6.219-8.56'/%3e%3c/svg%3e");animation:_spin_1ins3_1 1.5s linear infinite;display:inline-block}._normal_1ins3_102::picker-icon{content:url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='white'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%20class='lucide%20lucide-chevron-down-icon%20lucide-chevron-down'%3e%3cpath%20d='m6%209%206%206%206-6'/%3e%3c/svg%3e")}._select_1ins3_2::picker(listbox){--select-listbox-background: #1f2937;border-color:#ffffff1a}._select_1ins3_2::picker(group-label){--select-group-label-color: #9ca3af}._select_1ins3_2::picker-icon{--select-icon-color: white}._select_1ins3_2 option{color:#fff}._select_1ins3_2 option:hover{background-color:#3b82f626}._select_1ins3_2 option:checked{background-color:#3b82f633;color:#60a5fa}}
@@ -1,6 +1,6 @@
1
1
  import { jsxs as d, jsx as r } from "react/jsx-runtime";
2
- import { Loader2 as u } from "lucide-react";
3
2
  import { cn as l } from "../utils/cn.js";
3
+ import { Loader2 as u } from "lucide-react";
4
4
  function p(s) {
5
5
  const {
6
6
  className: i,
@@ -1,42 +1,68 @@
1
- import { jsxs as s, jsx as r } from "react/jsx-runtime";
2
- import { cn as o } from "../utils/cn.js";
3
- import { Loader2 as m, ChevronDown as u } from "lucide-react";
4
- function x(d) {
5
- const { label: n, options: i, disabled: e, error: a, loading: t, className: c, ...g } = d;
6
- return /* @__PURE__ */ s("div", { className: o("w-full", c), children: [
7
- /* @__PURE__ */ r(
1
+ import { jsxs as b, jsx as a } from "react/jsx-runtime";
2
+ import { cn as l } from "../utils/cn.js";
3
+ const m = "_select_1ins3_2", u = "_loading_1ins3_96", y = "_normal_1ins3_102", d = {
4
+ select: m,
5
+ loading: u,
6
+ normal: y
7
+ };
8
+ function k(o) {
9
+ const { label: n, options: c, disabled: s, error: t, loading: r, className: i, ...g } = o;
10
+ return /* @__PURE__ */ b("div", { className: l("w-full", i), children: [
11
+ /* @__PURE__ */ a(
8
12
  "label",
9
13
  {
10
- className: o(
11
- "block text-sm font-medium mb-1.5 transition-colors text-gray-700 dark:text-gray-300",
12
- e && "opacity-60"
14
+ className: l(
15
+ "mb-1.5 block text-sm font-medium transition-colors text-gray-700 dark:text-gray-300",
16
+ (s || r) && "opacity-60"
13
17
  ),
14
18
  children: n
15
19
  }
16
20
  ),
17
- /* @__PURE__ */ s("div", { className: "relative", children: [
18
- /* @__PURE__ */ r(
19
- "select",
20
- {
21
- className: o(
22
- "w-full rounded-lg border py-2 px-3 pr-8 appearance-none transition-colors",
23
- "border-gray-300 bg-white text-gray-900",
24
- "dark:border-gray-700 dark:bg-gray-800/50 dark:text-gray-200",
25
- "focus:outline-none focus:ring-2 focus:border-transparent",
26
- "focus:ring-blue-400 dark:focus:ring-blue-500",
27
- a && "border-red-500 focus:ring-red-400 dark:border-red-500/70 dark:focus:ring-red-500",
28
- (e || t) && "opacity-60 cursor-not-allowed bg-gray-100 dark:bg-gray-700/50"
29
- ),
30
- disabled: e || t,
31
- ...g,
32
- children: i.map((l) => /* @__PURE__ */ r("option", { value: l.value, children: l.label }, l.value))
33
- }
34
- ),
35
- /* @__PURE__ */ r("div", { className: "absolute right-3 top-1/2 -translate-y-1/2 pointer-events-none", children: t ? /* @__PURE__ */ r(m, { className: "h-4 w-4 animate-spin text-gray-500 dark:text-gray-400" }) : /* @__PURE__ */ r(u, { className: "h-4 w-4 text-gray-500 dark:text-gray-400" }) })
36
- ] }),
37
- a && /* @__PURE__ */ r("p", { className: "mt-1.5 text-sm text-red-500 dark:text-red-400", children: a })
21
+ /* @__PURE__ */ a(
22
+ "div",
23
+ {
24
+ className: l(
25
+ "relative rounded-lg border transition-colors",
26
+ "border-gray-300 bg-white dark:border-gray-700 dark:bg-gray-800/50",
27
+ t && "border-red-500 dark:border-red-500/70",
28
+ (s || r) && "opacity-60"
29
+ ),
30
+ children: /* @__PURE__ */ a(
31
+ "select",
32
+ {
33
+ className: l(
34
+ "w-full rounded-lg py-2 px-3 pr-8 transition-colors",
35
+ "text-gray-700 dark:text-gray-200",
36
+ "bg-transparent",
37
+ "focus:outline-none focus:ring-2 focus:ring-blue-400 dark:focus:ring-blue-500 focus:border-transparent",
38
+ "hover:bg-gray-100/80 dark:hover:bg-gray-700/50",
39
+ d.select,
40
+ r ? d.loading : d.normal,
41
+ t && "focus:ring-red-400 dark:focus:ring-red-500",
42
+ (s || r) && "cursor-not-allowed"
43
+ ),
44
+ disabled: s || r,
45
+ ...g,
46
+ children: c.map((e) => /* @__PURE__ */ a(
47
+ "option",
48
+ {
49
+ value: e.value,
50
+ disabled: e.disabled,
51
+ className: l(
52
+ "py-1",
53
+ e.disabled && "text-gray-400 dark:text-gray-500"
54
+ ),
55
+ children: e.label
56
+ },
57
+ e.value
58
+ ))
59
+ }
60
+ )
61
+ }
62
+ ),
63
+ t && /* @__PURE__ */ a("p", { className: "mt-1.5 text-sm text-red-500 dark:text-red-400", children: t })
38
64
  ] });
39
65
  }
40
66
  export {
41
- x as default
67
+ k as default
42
68
  };
@@ -1,17 +1,17 @@
1
1
  import { jsxs as r, jsx as e } from "react/jsx-runtime";
2
2
  import { Loader2 as u } from "lucide-react";
3
3
  import { cn as s } from "../utils/cn.js";
4
- function h(c) {
4
+ function h(o) {
5
5
  const {
6
- label: i,
7
- loading: n = !1,
6
+ label: c,
7
+ loading: i = !1,
8
8
  value: t,
9
9
  onChange: d,
10
10
  children: f,
11
11
  disabled: a,
12
12
  error: l,
13
- description: o
14
- } = c;
13
+ description: n
14
+ } = o;
15
15
  return /* @__PURE__ */ r("div", { className: "w-full", children: [
16
16
  /* @__PURE__ */ r("div", { className: "flex items-center justify-between", children: [
17
17
  /* @__PURE__ */ r("div", { className: "flex flex-col", children: [
@@ -22,10 +22,10 @@ function h(c) {
22
22
  "text-sm font-medium transition-colors text-gray-700 dark:text-gray-300",
23
23
  a && "opacity-60"
24
24
  ),
25
- children: i
25
+ children: c
26
26
  }
27
27
  ),
28
- o && /* @__PURE__ */ e("p", { className: "text-xs mt-0.5 text-gray-500 dark:text-gray-400", children: o })
28
+ n && /* @__PURE__ */ e("p", { className: "text-xs mt-0.5 text-gray-500 dark:text-gray-400", children: n })
29
29
  ] }),
30
30
  /* @__PURE__ */ r("div", { className: "flex items-center gap-3", children: [
31
31
  /* @__PURE__ */ r(
@@ -42,12 +42,11 @@ function h(c) {
42
42
  l && "ring-2 ring-red-400 dark:ring-red-500"
43
43
  ),
44
44
  role: "switch",
45
- disabled: a || n,
45
+ disabled: a || i,
46
46
  onClick: () => {
47
47
  d(!t);
48
48
  },
49
49
  "aria-checked": t,
50
- "aria-label": i,
51
50
  children: [
52
51
  /* @__PURE__ */ e(
53
52
  "span",
@@ -58,7 +57,7 @@ function h(c) {
58
57
  )
59
58
  }
60
59
  ),
61
- n && /* @__PURE__ */ e("div", { className: "absolute left-0 top-0 z-10 flex h-full w-full items-center justify-center rounded-full bg-slate-300/55 dark:bg-slate-500/55 backdrop-blur-md", children: /* @__PURE__ */ e(u, { className: "h-3 w-3 animate-spin text-white" }) })
60
+ i && /* @__PURE__ */ e("div", { className: "absolute left-0 top-0 z-10 flex h-full w-full items-center justify-center rounded-full bg-slate-300/55 dark:bg-slate-500/55 backdrop-blur-md", children: /* @__PURE__ */ e(u, { className: "h-3 w-3 animate-spin text-white" }) })
62
61
  ]
63
62
  }
64
63
  ),
@@ -143,7 +143,7 @@ function D() {
143
143
  return y.H.useFormState(n, r, a);
144
144
  }, s.useFormStatus = function() {
145
145
  return y.H.useHostTransitionStatus();
146
- }, s.version = "19.0.0", s;
146
+ }, s.version = "19.1.0", s;
147
147
  }
148
148
  var u = {};
149
149
  /**
@@ -365,7 +365,7 @@ See https://react.dev/link/invalid-hook-call for tips about how to debug and fix
365
365
  return y().useFormState(t, e, i);
366
366
  }, u.useFormStatus = function() {
367
367
  return y().useHostTransitionStatus();
368
- }, u.version = "19.0.0", typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ < "u" && typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop == "function" && __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop(Error());
368
+ }, u.version = "19.1.0", typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ < "u" && typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop == "function" && __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop(Error());
369
369
  }()), u;
370
370
  }
371
371
  var E;
@@ -2,7 +2,7 @@
2
2
  import { jsx as t, jsxs as l } from "react/jsx-runtime";
3
3
  import { X as i } from "lucide-react";
4
4
  import { useEffect as s } from "react";
5
- import { R as a } from "../index-B7Vxkz5-.js";
5
+ import { R as a } from "../index-BsSpLvpM.js";
6
6
  function c(r) {
7
7
  const { isOpen: e, onClose: o, children: n, title: d } = r;
8
8
  return s(() => (e ? document.body.style.overflow = "hidden" : document.body.style.overflow = "unset", () => {
@@ -0,0 +1,8 @@
1
+ import { Meta, StoryObj } from '@storybook/react';
2
+ import { default as DailyActivityChart } from './index';
3
+ declare const meta: Meta<typeof DailyActivityChart>;
4
+ export default meta;
5
+ type Story = StoryObj<typeof DailyActivityChart>;
6
+ export declare const Default: Story;
7
+ export declare const HighActivity: Story;
8
+ export declare const Empty: Story;
@@ -1,5 +1,5 @@
1
1
  interface InputFieldProps extends React.InputHTMLAttributes<HTMLInputElement> {
2
- label?: string;
2
+ label?: string | React.ReactNode;
3
3
  error?: string;
4
4
  loading?: boolean;
5
5
  }
@@ -0,0 +1,11 @@
1
+ import { Meta, StoryObj } from '@storybook/react';
2
+ import { default as InputField } from './input-field';
3
+ declare const meta: Meta<typeof InputField>;
4
+ export default meta;
5
+ type Story = StoryObj<typeof InputField>;
6
+ export declare const Default: Story;
7
+ export declare const WithValue: Story;
8
+ export declare const WithError: Story;
9
+ export declare const Disabled: Story;
10
+ export declare const Loading: Story;
11
+ export declare const WithoutLabel: Story;
@@ -9,7 +9,7 @@ interface MultiSelectProps {
9
9
  disabled?: boolean;
10
10
  value?: string[] | string;
11
11
  onChange: (value?: string[] | string) => void;
12
- label: string;
12
+ label: string | React.ReactNode;
13
13
  placeholder?: string;
14
14
  maxValues?: number;
15
15
  searchable?: boolean;
@@ -0,0 +1,13 @@
1
+ import { Meta, StoryObj } from '@storybook/react';
2
+ import { default as MultiSelect } from './multi-select';
3
+ declare const meta: Meta<typeof MultiSelect>;
4
+ export default meta;
5
+ type Story = StoryObj<typeof MultiSelect>;
6
+ export declare const Default: Story;
7
+ export declare const WithPreselectedValues: Story;
8
+ export declare const SingleSelect: Story;
9
+ export declare const WithMaxValues: Story;
10
+ export declare const WithStringOptions: Story;
11
+ export declare const WithError: Story;
12
+ export declare const Disabled: Story;
13
+ export declare const Loading: Story;
@@ -1,6 +1,6 @@
1
1
  import { default as React } from 'react';
2
2
  interface NumberFieldProps extends React.InputHTMLAttributes<HTMLInputElement> {
3
- label: string;
3
+ label: string | React.ReactNode;
4
4
  disabled?: boolean;
5
5
  ref?: React.Ref<HTMLInputElement>;
6
6
  error?: string;
@@ -0,0 +1,11 @@
1
+ import { Meta, StoryObj } from '@storybook/react';
2
+ import { default as NumberField } from './number-field';
3
+ declare const meta: Meta<typeof NumberField>;
4
+ export default meta;
5
+ type Story = StoryObj<typeof NumberField>;
6
+ export declare const Default: Story;
7
+ export declare const WithValue: Story;
8
+ export declare const WithMinMax: Story;
9
+ export declare const WithError: Story;
10
+ export declare const Disabled: Story;
11
+ export declare const Loading: Story;
@@ -3,7 +3,8 @@ interface SelectFieldProps extends React.SelectHTMLAttributes<HTMLSelectElement>
3
3
  label: string | React.ReactNode;
4
4
  options: Array<{
5
5
  value: string;
6
- label: string;
6
+ label: string | React.ReactNode;
7
+ disabled?: boolean;
7
8
  }>;
8
9
  ref?: React.Ref<HTMLSelectElement>;
9
10
  disabled?: boolean;
@@ -0,0 +1,11 @@
1
+ import { Meta, StoryObj } from '@storybook/react';
2
+ import { default as SelectField } from './select-field';
3
+ declare const meta: Meta<typeof SelectField>;
4
+ export default meta;
5
+ type Story = StoryObj<typeof SelectField>;
6
+ export declare const Default: Story;
7
+ export declare const WithPreselectedValue: Story;
8
+ export declare const WithManyOptions: Story;
9
+ export declare const WithError: Story;
10
+ export declare const Disabled: Story;
11
+ export declare const Loading: Story;
@@ -1,6 +1,6 @@
1
1
  import { default as React } from 'react';
2
2
  interface SwitchFieldProps {
3
- label: string;
3
+ label: string | React.ReactNode;
4
4
  loading?: boolean;
5
5
  value: boolean;
6
6
  onChange: (value: boolean) => Promise<unknown> | void;
@@ -0,0 +1,12 @@
1
+ import { Meta, StoryObj } from '@storybook/react';
2
+ import { default as SwitchField } from './switch-field';
3
+ declare const meta: Meta<typeof SwitchField>;
4
+ export default meta;
5
+ type Story = StoryObj<typeof SwitchField>;
6
+ export declare const Default: Story;
7
+ export declare const Checked: Story;
8
+ export declare const WithDescription: Story;
9
+ export declare const WithError: Story;
10
+ export declare const Disabled: Story;
11
+ export declare const Loading: Story;
12
+ export declare const WithChildren: Story;
@@ -0,0 +1,8 @@
1
+ import { Meta, StoryObj } from '@storybook/react';
2
+ import { default as Modal } from './index';
3
+ declare const meta: Meta<typeof Modal>;
4
+ export default meta;
5
+ type Story = StoryObj<typeof Modal>;
6
+ export declare const Default: Story;
7
+ export declare const WithLongTitle: Story;
8
+ export declare const WithCustomContent: Story;