ikon-react-components-lib 1.0.1 → 1.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +44 -52
- package/dist/ikon-react-components-lib.cjs.js +4 -4
- package/dist/ikon-react-components-lib.es.js +1202 -1162
- package/dist/index.d.ts +4 -9
- package/package.json +1 -2
package/README.md
CHANGED
|
@@ -36,7 +36,7 @@ In your **entry point** (typically `main.tsx` or `index.tsx`), configure the lib
|
|
|
36
36
|
import React from "react";
|
|
37
37
|
import ReactDOM from "react-dom/client";
|
|
38
38
|
import App from "./App";
|
|
39
|
-
import { setIkonConfig } from "
|
|
39
|
+
import { setIkonConfig } from "ikon-react-components-lib";
|
|
40
40
|
import "./global.css";
|
|
41
41
|
|
|
42
42
|
// Configure BEFORE rendering
|
|
@@ -66,7 +66,7 @@ ReactDOM.createRoot(document.getElementById("root")!).render(
|
|
|
66
66
|
In your root `App.tsx`, wrap your application with `<ProviderWrapper>`:
|
|
67
67
|
|
|
68
68
|
```tsx
|
|
69
|
-
import { ProviderWrapper } from "
|
|
69
|
+
import { ProviderWrapper } from "ikon-react-components-lib";
|
|
70
70
|
|
|
71
71
|
function App() {
|
|
72
72
|
return (
|
|
@@ -90,7 +90,7 @@ export default App;
|
|
|
90
90
|
Use `RenderSidebarNav` and `RenderAppBreadcrumb` to build a full navigation layout:
|
|
91
91
|
|
|
92
92
|
```tsx
|
|
93
|
-
import { RenderAppBreadcrumb, RenderSidebarNav } from "
|
|
93
|
+
import { RenderAppBreadcrumb, RenderSidebarNav } from "ikon-react-components-lib";
|
|
94
94
|
import { LayoutDashboard, Settings, Users, FileText } from "lucide-react";
|
|
95
95
|
|
|
96
96
|
function App() {
|
|
@@ -160,8 +160,8 @@ interface NavItem {
|
|
|
160
160
|
Use `useRefresh()` hook to refresh the API or trigger sidebar re-render:
|
|
161
161
|
|
|
162
162
|
```tsx
|
|
163
|
-
import { useRefresh } from "
|
|
164
|
-
import { TextButton } from "
|
|
163
|
+
import { useRefresh } from "ikon-react-components-lib";
|
|
164
|
+
import { TextButton } from "ikon-react-components-lib";
|
|
165
165
|
|
|
166
166
|
function SettingsPage() {
|
|
167
167
|
const { refresh } = useRefresh();
|
|
@@ -192,7 +192,7 @@ All standard ShadCN components are included. Full documentation: [https://ui.sha
|
|
|
192
192
|
|---|---|---|---|
|
|
193
193
|
| accordion | alert-dialog | alert | avatar |
|
|
194
194
|
| badge | button | calendar | card |
|
|
195
|
-
| checkbox | command | date-
|
|
195
|
+
| checkbox | command | date-range-picker |
|
|
196
196
|
| dialog | dropdown-menu | hover-card | input |
|
|
197
197
|
| label | navigation-menu | popover | progress |
|
|
198
198
|
| radio-group | scroll-area | select | separator |
|
|
@@ -209,7 +209,7 @@ All standard ShadCN components are included. Full documentation: [https://ui.sha
|
|
|
209
209
|
### ActionMenu
|
|
210
210
|
|
|
211
211
|
```tsx
|
|
212
|
-
import { ActionMenu } from "
|
|
212
|
+
import { ActionMenu } from "ikon-react-components-lib";
|
|
213
213
|
```
|
|
214
214
|
|
|
215
215
|
#### Props
|
|
@@ -244,15 +244,7 @@ import { ActionMenu } from "ikoncomponents";
|
|
|
244
244
|
AI chat assistant powered by `@assistant-ui/react`.
|
|
245
245
|
|
|
246
246
|
```tsx
|
|
247
|
-
import { AssistantComponent } from "
|
|
248
|
-
```
|
|
249
|
-
|
|
250
|
-
**Required dependencies:**
|
|
251
|
-
|
|
252
|
-
```bash
|
|
253
|
-
npm install @assistant-ui/react@^0.12.12
|
|
254
|
-
npm install @assistant-ui/react-ai-sdk@^1.3.9
|
|
255
|
-
npm install @assistant-ui/react-markdown@^0.12.5
|
|
247
|
+
import { AssistantComponent } from "ikon-react-components-lib";
|
|
256
248
|
```
|
|
257
249
|
|
|
258
250
|
#### Props
|
|
@@ -292,7 +284,7 @@ npm install @assistant-ui/react-markdown@^0.12.5
|
|
|
292
284
|
### BigCalendar
|
|
293
285
|
|
|
294
286
|
```tsx
|
|
295
|
-
import { BigCalendar } from "
|
|
287
|
+
import { BigCalendar } from "ikon-react-components-lib";
|
|
296
288
|
```
|
|
297
289
|
|
|
298
290
|
#### Props
|
|
@@ -339,7 +331,7 @@ import {
|
|
|
339
331
|
IconTextButtonWithTooltip,
|
|
340
332
|
IconButton,
|
|
341
333
|
IconButtonWithTooltip,
|
|
342
|
-
} from "
|
|
334
|
+
} from "ikon-react-components-lib";
|
|
343
335
|
```
|
|
344
336
|
|
|
345
337
|
All button components share a common props interface extending `React.ButtonHTMLAttributes<HTMLButtonElement>`:
|
|
@@ -363,7 +355,7 @@ All button components share a common props interface extending `React.ButtonHTML
|
|
|
363
355
|
### ComboboxInput
|
|
364
356
|
|
|
365
357
|
```tsx
|
|
366
|
-
import { ComboboxInput } from "
|
|
358
|
+
import { ComboboxInput } from "ikon-react-components-lib";
|
|
367
359
|
```
|
|
368
360
|
|
|
369
361
|
#### `ComboBoxInputProps`
|
|
@@ -390,7 +382,7 @@ import { ComboboxInput } from "ikoncomponents";
|
|
|
390
382
|
### MultiCombobox
|
|
391
383
|
|
|
392
384
|
```tsx
|
|
393
|
-
import { MultiCombobox } from "
|
|
385
|
+
import { MultiCombobox } from "ikon-react-components-lib";
|
|
394
386
|
```
|
|
395
387
|
|
|
396
388
|
#### Props
|
|
@@ -408,7 +400,7 @@ import { MultiCombobox } from "ikoncomponents";
|
|
|
408
400
|
### CustomAlertDialog
|
|
409
401
|
|
|
410
402
|
```tsx
|
|
411
|
-
import { CustomAlertDialog } from "
|
|
403
|
+
import { CustomAlertDialog } from "ikon-react-components-lib";
|
|
412
404
|
```
|
|
413
405
|
|
|
414
406
|
#### Props
|
|
@@ -432,7 +424,7 @@ import { CustomAlertDialog } from "ikoncomponents";
|
|
|
432
424
|
A fully-featured data table with sorting, filtering, pagination, grouping, and column customization.
|
|
433
425
|
|
|
434
426
|
```tsx
|
|
435
|
-
import { DataTable } from "
|
|
427
|
+
import { DataTable } from "ikon-react-components-lib";
|
|
436
428
|
import { ColumnDef } from "@tanstack/react-table";
|
|
437
429
|
```
|
|
438
430
|
|
|
@@ -440,8 +432,8 @@ import { ColumnDef } from "@tanstack/react-table";
|
|
|
440
432
|
|
|
441
433
|
```tsx
|
|
442
434
|
import { useState } from "react";
|
|
443
|
-
import { DataTable } from "
|
|
444
|
-
import type { DTExtraParamsProps } from "
|
|
435
|
+
import { DataTable } from "ikon-react-components-lib";
|
|
436
|
+
import type { DTExtraParamsProps } from "ikon-react-components-lib";
|
|
445
437
|
import { ColumnDef } from "@tanstack/react-table";
|
|
446
438
|
|
|
447
439
|
interface User {
|
|
@@ -579,7 +571,7 @@ Extends TanStack Table's `ColumnDef<TData, TValue>`.
|
|
|
579
571
|
### EChart
|
|
580
572
|
|
|
581
573
|
```tsx
|
|
582
|
-
import { EChart } from "
|
|
574
|
+
import { EChart } from "ikon-react-components-lib";
|
|
583
575
|
```
|
|
584
576
|
|
|
585
577
|
Uses `forwardRef` — you can access `ref` methods.
|
|
@@ -615,7 +607,7 @@ Uses `forwardRef` — you can access `ref` methods.
|
|
|
615
607
|
### FileUploader
|
|
616
608
|
|
|
617
609
|
```tsx
|
|
618
|
-
import { FileUploader, getImageFromObject } from "
|
|
610
|
+
import { FileUploader, getImageFromObject } from "ikon-react-components-lib";
|
|
619
611
|
```
|
|
620
612
|
|
|
621
613
|
#### `FileUploaderProps`
|
|
@@ -663,7 +655,7 @@ const handleFileUpload = async (fileObj: FileObjType) => {
|
|
|
663
655
|
### GlowingEffect
|
|
664
656
|
|
|
665
657
|
```tsx
|
|
666
|
-
import { GlowingEffect } from "
|
|
658
|
+
import { GlowingEffect } from "ikon-react-components-lib";
|
|
667
659
|
```
|
|
668
660
|
|
|
669
661
|
#### Props
|
|
@@ -686,7 +678,7 @@ import { GlowingEffect } from "ikoncomponents";
|
|
|
686
678
|
### Icon
|
|
687
679
|
|
|
688
680
|
```tsx
|
|
689
|
-
import { Icon } from "
|
|
681
|
+
import { Icon } from "ikon-react-components-lib";
|
|
690
682
|
```
|
|
691
683
|
|
|
692
684
|
Dynamically renders any [Lucide icon](https://lucide.dev/icons) by name.
|
|
@@ -706,7 +698,7 @@ Dynamically renders any [Lucide icon](https://lucide.dev/icons) by name.
|
|
|
706
698
|
### LoadingSpinner
|
|
707
699
|
|
|
708
700
|
```tsx
|
|
709
|
-
import { LoadingSpinner } from "
|
|
701
|
+
import { LoadingSpinner } from "ikon-react-components-lib";
|
|
710
702
|
```
|
|
711
703
|
|
|
712
704
|
#### Props
|
|
@@ -723,7 +715,7 @@ import { LoadingSpinner } from "ikoncomponents";
|
|
|
723
715
|
### NoDataComponent
|
|
724
716
|
|
|
725
717
|
```tsx
|
|
726
|
-
import { NoDataComponent } from "
|
|
718
|
+
import { NoDataComponent } from "ikon-react-components-lib";
|
|
727
719
|
```
|
|
728
720
|
|
|
729
721
|
#### Props
|
|
@@ -737,7 +729,7 @@ import { NoDataComponent } from "ikoncomponents";
|
|
|
737
729
|
### PageWrapper
|
|
738
730
|
|
|
739
731
|
```tsx
|
|
740
|
-
import { PageWrapper } from "
|
|
732
|
+
import { PageWrapper } from "ikon-react-components-lib";
|
|
741
733
|
```
|
|
742
734
|
|
|
743
735
|
#### Props
|
|
@@ -754,7 +746,7 @@ import { PageWrapper } from "ikoncomponents";
|
|
|
754
746
|
### PasswordStrengthMeter
|
|
755
747
|
|
|
756
748
|
```tsx
|
|
757
|
-
import { PasswordStrengthMeter } from "
|
|
749
|
+
import { PasswordStrengthMeter } from "ikon-react-components-lib";
|
|
758
750
|
```
|
|
759
751
|
|
|
760
752
|
#### Props
|
|
@@ -770,7 +762,7 @@ Displays a color-coded progress bar: Very weak → Weak → Fair → Good → St
|
|
|
770
762
|
### SimpleWidget
|
|
771
763
|
|
|
772
764
|
```tsx
|
|
773
|
-
import { SimpleWidget } from "
|
|
765
|
+
import { SimpleWidget } from "ikon-react-components-lib";
|
|
774
766
|
```
|
|
775
767
|
|
|
776
768
|
#### Props
|
|
@@ -792,7 +784,7 @@ import { SimpleWidget } from "ikoncomponents";
|
|
|
792
784
|
### Tabs (CustomTabs)
|
|
793
785
|
|
|
794
786
|
```tsx
|
|
795
|
-
import { CustomTabs } from "
|
|
787
|
+
import { CustomTabs } from "ikon-react-components-lib";
|
|
796
788
|
```
|
|
797
789
|
|
|
798
790
|
#### Props
|
|
@@ -825,7 +817,7 @@ import { CustomTabs } from "ikoncomponents";
|
|
|
825
817
|
### TitleProgress
|
|
826
818
|
|
|
827
819
|
```tsx
|
|
828
|
-
import { TitleProgress } from "
|
|
820
|
+
import { TitleProgress } from "ikon-react-components-lib";
|
|
829
821
|
```
|
|
830
822
|
|
|
831
823
|
#### Props
|
|
@@ -846,7 +838,7 @@ import { TitleProgress } from "ikoncomponents";
|
|
|
846
838
|
### TooltipComponent
|
|
847
839
|
|
|
848
840
|
```tsx
|
|
849
|
-
import { TooltipComponent } from "
|
|
841
|
+
import { TooltipComponent } from "ikon-react-components-lib";
|
|
850
842
|
```
|
|
851
843
|
|
|
852
844
|
#### Props
|
|
@@ -861,7 +853,7 @@ import { TooltipComponent } from "ikoncomponents";
|
|
|
861
853
|
### Widgets
|
|
862
854
|
|
|
863
855
|
```tsx
|
|
864
|
-
import { Widgets } from "
|
|
856
|
+
import { Widgets } from "ikon-react-components-lib";
|
|
865
857
|
```
|
|
866
858
|
|
|
867
859
|
#### Props
|
|
@@ -887,7 +879,7 @@ import { Widgets } from "ikoncomponents";
|
|
|
887
879
|
#### GradeTableLoader
|
|
888
880
|
|
|
889
881
|
```tsx
|
|
890
|
-
import { GradeTableLoader } from "
|
|
882
|
+
import { GradeTableLoader } from "ikon-react-components-lib";
|
|
891
883
|
```
|
|
892
884
|
|
|
893
885
|
| Property | Type | Optional | Default | Description |
|
|
@@ -898,7 +890,7 @@ import { GradeTableLoader } from "ikoncomponents";
|
|
|
898
890
|
#### SkeletonWidget
|
|
899
891
|
|
|
900
892
|
```tsx
|
|
901
|
-
import { SkeletonWidget } from "
|
|
893
|
+
import { SkeletonWidget } from "ikon-react-components-lib";
|
|
902
894
|
```
|
|
903
895
|
|
|
904
896
|
| Property | Type | Optional | Description |
|
|
@@ -910,7 +902,7 @@ import { SkeletonWidget } from "ikoncomponents";
|
|
|
910
902
|
### SheetComponent
|
|
911
903
|
|
|
912
904
|
```tsx
|
|
913
|
-
import { SheetComponent } from "
|
|
905
|
+
import { SheetComponent } from "ikon-react-components-lib";
|
|
914
906
|
```
|
|
915
907
|
|
|
916
908
|
#### Props
|
|
@@ -947,7 +939,7 @@ import {
|
|
|
947
939
|
FormComboboxInput,
|
|
948
940
|
FormTextarea,
|
|
949
941
|
TextButton,
|
|
950
|
-
} from "
|
|
942
|
+
} from "ikon-react-components-lib";
|
|
951
943
|
|
|
952
944
|
const registrationSchema = z.object({
|
|
953
945
|
username: z.string().min(3, "Username must be 3+ chars"),
|
|
@@ -1036,7 +1028,7 @@ export default RegisterForm;
|
|
|
1036
1028
|
Standard text input field with validation.
|
|
1037
1029
|
|
|
1038
1030
|
```tsx
|
|
1039
|
-
import { FormInput } from "
|
|
1031
|
+
import { FormInput } from "ikon-react-components-lib";
|
|
1040
1032
|
```
|
|
1041
1033
|
|
|
1042
1034
|
#### Props
|
|
@@ -1055,7 +1047,7 @@ import { FormInput } from "ikoncomponents";
|
|
|
1055
1047
|
### FormPasswordInput
|
|
1056
1048
|
|
|
1057
1049
|
```tsx
|
|
1058
|
-
import { FormPasswordInput } from "
|
|
1050
|
+
import { FormPasswordInput } from "ikon-react-components-lib";
|
|
1059
1051
|
```
|
|
1060
1052
|
|
|
1061
1053
|
Same props as `FormInput`. Renders a password field with a show/hide toggle button.
|
|
@@ -1063,7 +1055,7 @@ Same props as `FormInput`. Renders a password field with a show/hide toggle butt
|
|
|
1063
1055
|
### FormTextarea
|
|
1064
1056
|
|
|
1065
1057
|
```tsx
|
|
1066
|
-
import { FormTextarea } from "
|
|
1058
|
+
import { FormTextarea } from "ikon-react-components-lib";
|
|
1067
1059
|
```
|
|
1068
1060
|
|
|
1069
1061
|
#### Props
|
|
@@ -1083,7 +1075,7 @@ Extends `FormFieldProps` + `TextareaHTMLAttributes<HTMLTextAreaElement>`.
|
|
|
1083
1075
|
### FormDateInput
|
|
1084
1076
|
|
|
1085
1077
|
```tsx
|
|
1086
|
-
import { FormDateInput } from "
|
|
1078
|
+
import { FormDateInput } from "ikon-react-components-lib";
|
|
1087
1079
|
```
|
|
1088
1080
|
|
|
1089
1081
|
#### Props
|
|
@@ -1102,7 +1094,7 @@ import { FormDateInput } from "ikoncomponents";
|
|
|
1102
1094
|
### FormComboboxInput
|
|
1103
1095
|
|
|
1104
1096
|
```tsx
|
|
1105
|
-
import { FormComboboxInput } from "
|
|
1097
|
+
import { FormComboboxInput } from "ikon-react-components-lib";
|
|
1106
1098
|
```
|
|
1107
1099
|
|
|
1108
1100
|
#### Props
|
|
@@ -1122,7 +1114,7 @@ import { FormComboboxInput } from "ikoncomponents";
|
|
|
1122
1114
|
### FormComboboxInputWithValue
|
|
1123
1115
|
|
|
1124
1116
|
```tsx
|
|
1125
|
-
import { FormComboboxInputWithValue } from "
|
|
1117
|
+
import { FormComboboxInputWithValue } from "ikon-react-components-lib";
|
|
1126
1118
|
```
|
|
1127
1119
|
|
|
1128
1120
|
A controlled variant of `FormComboboxInput` that accepts external `value` and `onChange`.
|
|
@@ -1145,7 +1137,7 @@ A controlled variant of `FormComboboxInput` that accepts external `value` and `o
|
|
|
1145
1137
|
### FormMultiComboboxInput
|
|
1146
1138
|
|
|
1147
1139
|
```tsx
|
|
1148
|
-
import { FormMultiComboboxInput } from "
|
|
1140
|
+
import { FormMultiComboboxInput } from "ikon-react-components-lib";
|
|
1149
1141
|
```
|
|
1150
1142
|
|
|
1151
1143
|
#### Props
|
|
@@ -1166,7 +1158,7 @@ import { FormMultiComboboxInput } from "ikoncomponents";
|
|
|
1166
1158
|
### FormOtpInput
|
|
1167
1159
|
|
|
1168
1160
|
```tsx
|
|
1169
|
-
import { FormOtpInput } from "
|
|
1161
|
+
import { FormOtpInput } from "ikon-react-components-lib";
|
|
1170
1162
|
```
|
|
1171
1163
|
|
|
1172
1164
|
Same props as `FormInput`. Renders a 4-digit OTP input.
|
|
@@ -1176,7 +1168,7 @@ Same props as `FormInput`. Renders a 4-digit OTP input.
|
|
|
1176
1168
|
## ImageCropperProvider
|
|
1177
1169
|
|
|
1178
1170
|
```tsx
|
|
1179
|
-
import { ImageCropperProvider, useImageCropper } from "
|
|
1171
|
+
import { ImageCropperProvider, useImageCropper } from "ikon-react-components-lib";
|
|
1180
1172
|
```
|
|
1181
1173
|
|
|
1182
1174
|
Provides an image cropper context and modal for cropping images into landscape, portrait, and icon aspect ratios.
|
|
@@ -1207,7 +1199,7 @@ Returns:
|
|
|
1207
1199
|
## ThemeToggleBtn
|
|
1208
1200
|
|
|
1209
1201
|
```tsx
|
|
1210
|
-
import { ThemeToggleBtn } from "
|
|
1202
|
+
import { ThemeToggleBtn } from "ikon-react-components-lib";
|
|
1211
1203
|
```
|
|
1212
1204
|
|
|
1213
1205
|
Renders a theme toggle button (light/dark/system). No props required.
|
|
@@ -1217,7 +1209,7 @@ Renders a theme toggle button (light/dark/system). No props required.
|
|
|
1217
1209
|
## WorkInProgress
|
|
1218
1210
|
|
|
1219
1211
|
```tsx
|
|
1220
|
-
import { WorkInProgress } from "
|
|
1212
|
+
import { WorkInProgress } from "ikon-react-components-lib";
|
|
1221
1213
|
```
|
|
1222
1214
|
|
|
1223
1215
|
Renders a "Work In Progress" placeholder. No props required.
|