yems-ui 1.1.5 → 1.2.1
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 +1 -1
- package/README.md +248 -1
- package/dist/index.d.mts +114 -1
- package/dist/index.d.ts +114 -1
- package/dist/index.js +871 -84
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +853 -84
- package/dist/index.mjs.map +1 -1
- package/package.json +6 -5
package/LICENSE
CHANGED
package/README.md
CHANGED
|
@@ -774,4 +774,251 @@ import type {
|
|
|
774
774
|
|
|
775
775
|
## License
|
|
776
776
|
|
|
777
|
-
MIT © [
|
|
777
|
+
MIT © [Yemi Ogundairo](https://github.com/SodiqOgundairo)
|
|
778
|
+
|
|
779
|
+
---
|
|
780
|
+
|
|
781
|
+
## 🔤 Fonts
|
|
782
|
+
|
|
783
|
+
yems-ui declares font tokens but **does not load fonts itself** — you choose the method that fits your project.
|
|
784
|
+
|
|
785
|
+
### Option A — Google Fonts
|
|
786
|
+
|
|
787
|
+
Add to your `index.html` `<head>`:
|
|
788
|
+
|
|
789
|
+
```html
|
|
790
|
+
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
|
791
|
+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
|
792
|
+
<link
|
|
793
|
+
href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;0,900;1,400&display=swap"
|
|
794
|
+
rel="stylesheet"
|
|
795
|
+
/>
|
|
796
|
+
```
|
|
797
|
+
|
|
798
|
+
### Option B — Fontsource (self-hosted, no CDN)
|
|
799
|
+
|
|
800
|
+
```bash
|
|
801
|
+
npm install @fontsource/poppins
|
|
802
|
+
```
|
|
803
|
+
|
|
804
|
+
Then in your app entry file:
|
|
805
|
+
|
|
806
|
+
```ts
|
|
807
|
+
import "@fontsource/poppins/400.css";
|
|
808
|
+
import "@fontsource/poppins/500.css";
|
|
809
|
+
import "@fontsource/poppins/600.css";
|
|
810
|
+
import "@fontsource/poppins/700.css";
|
|
811
|
+
```
|
|
812
|
+
|
|
813
|
+
### Option C — Bring your own font
|
|
814
|
+
|
|
815
|
+
Override the CSS token in your stylesheet (after importing yems-ui styles):
|
|
816
|
+
|
|
817
|
+
```css
|
|
818
|
+
:root {
|
|
819
|
+
--font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
|
|
820
|
+
--font-mono: "Fira Code", ui-monospace, monospace;
|
|
821
|
+
}
|
|
822
|
+
```
|
|
823
|
+
|
|
824
|
+
---
|
|
825
|
+
|
|
826
|
+
## 🎨 New Components (v1.2+)
|
|
827
|
+
|
|
828
|
+
### Typography
|
|
829
|
+
|
|
830
|
+
```tsx
|
|
831
|
+
import { Heading, Text, Code, Lead, Blockquote } from "yems-ui";
|
|
832
|
+
|
|
833
|
+
// Heading — renders h1-h6 with size/weight/gradient variants
|
|
834
|
+
<Heading as="h1" size="4xl" gradient="primary">Welcome to YemsUI</Heading>
|
|
835
|
+
<Heading as="h2" size="2xl" weight="bold">Section Title</Heading>
|
|
836
|
+
<Heading size="lg" gradient="accent">Accent Heading</Heading>
|
|
837
|
+
|
|
838
|
+
// Text — inline or block text with semantic color variants
|
|
839
|
+
<Text size="lg" variant="muted" leading="relaxed">Subtitle text</Text>
|
|
840
|
+
<Text size="sm" variant="error">Error message</Text>
|
|
841
|
+
<Text as="span" weight="semibold" variant="primary">Highlighted</Text>
|
|
842
|
+
|
|
843
|
+
// Code
|
|
844
|
+
<Code>npm install yems-ui</Code> // inline
|
|
845
|
+
<Code block>{`const x = 1;`}</Code> // block / pre
|
|
846
|
+
|
|
847
|
+
// Lead — large intro paragraph
|
|
848
|
+
<Lead>A short description that introduces the section content.</Lead>
|
|
849
|
+
|
|
850
|
+
// Blockquote
|
|
851
|
+
<Blockquote>Design is not just what it looks like. Design is how it works.</Blockquote>
|
|
852
|
+
```
|
|
853
|
+
|
|
854
|
+
**Heading props:**
|
|
855
|
+
|
|
856
|
+
| Prop | Values | Default |
|
|
857
|
+
| ---------- | --------------------------------------------------- | ---------- |
|
|
858
|
+
| `as` | `h1` `h2` `h3` `h4` `h5` `h6` | `h2` |
|
|
859
|
+
| `size` | `4xl` `3xl` `2xl` `xl` `lg` `md` | `2xl` |
|
|
860
|
+
| `weight` | `light` `normal` `medium` `semibold` `bold` `black` | `semibold` |
|
|
861
|
+
| `gradient` | `none` `primary` `accent` `cool` | `none` |
|
|
862
|
+
| `align` | `left` `center` `right` | `left` |
|
|
863
|
+
|
|
864
|
+
**Text props:**
|
|
865
|
+
|
|
866
|
+
| Prop | Values | Default |
|
|
867
|
+
| ---------- | ---------------------------------------------------------------- | --------- |
|
|
868
|
+
| `as` | `p` `span` `div` `label` `small` `strong` `em` | `p` |
|
|
869
|
+
| `size` | `xs` `sm` `md` `lg` `xl` | `md` |
|
|
870
|
+
| `variant` | `default` `muted` `primary` `accent` `success` `warning` `error` | `default` |
|
|
871
|
+
| `weight` | `light` `normal` `medium` `semibold` `bold` | `normal` |
|
|
872
|
+
| `leading` | `tight` `snug` `normal` `relaxed` `loose` | `normal` |
|
|
873
|
+
| `truncate` | `true` `false` | `false` |
|
|
874
|
+
|
|
875
|
+
---
|
|
876
|
+
|
|
877
|
+
### Spinner
|
|
878
|
+
|
|
879
|
+
```tsx
|
|
880
|
+
import { Spinner, LoadingOverlay } from "yems-ui";
|
|
881
|
+
|
|
882
|
+
<Spinner /> // default medium primary
|
|
883
|
+
<Spinner size="lg" variant="accent" />
|
|
884
|
+
<Spinner size="xs" variant="white" /> // inside dark buttons
|
|
885
|
+
|
|
886
|
+
// LoadingOverlay — wraps any content
|
|
887
|
+
<LoadingOverlay loading={isLoading} label="Fetching data...">
|
|
888
|
+
<MyDataTable />
|
|
889
|
+
</LoadingOverlay>
|
|
890
|
+
```
|
|
891
|
+
|
|
892
|
+
| Prop | Values | Default |
|
|
893
|
+
| --------- | ---------------------------------------------- | --------- |
|
|
894
|
+
| `size` | `xs` `sm` `md` `lg` `xl` | `md` |
|
|
895
|
+
| `variant` | `primary` `secondary` `accent` `white` `muted` | `primary` |
|
|
896
|
+
|
|
897
|
+
---
|
|
898
|
+
|
|
899
|
+
### Kbd
|
|
900
|
+
|
|
901
|
+
```tsx
|
|
902
|
+
import { Kbd, Shortcut } from "yems-ui";
|
|
903
|
+
|
|
904
|
+
<Kbd>⌘</Kbd>
|
|
905
|
+
<Kbd size="lg">Enter</Kbd>
|
|
906
|
+
|
|
907
|
+
// Shortcut renders a key combination
|
|
908
|
+
<Shortcut keys={["⌘", "K"]} />
|
|
909
|
+
<Shortcut keys={["Ctrl", "Shift", "P"]} size="sm" />
|
|
910
|
+
```
|
|
911
|
+
|
|
912
|
+
---
|
|
913
|
+
|
|
914
|
+
### AvatarGroup
|
|
915
|
+
|
|
916
|
+
```tsx
|
|
917
|
+
import { AvatarGroup } from "yems-ui";
|
|
918
|
+
|
|
919
|
+
<AvatarGroup
|
|
920
|
+
avatars={[
|
|
921
|
+
{ src: "/alice.jpg", fallback: "AL", alt: "Alice" },
|
|
922
|
+
{ src: "/bob.jpg", fallback: "BO", alt: "Bob" },
|
|
923
|
+
{ fallback: "CW", alt: "Charlie" },
|
|
924
|
+
{ fallback: "DM", alt: "Diana" },
|
|
925
|
+
{ fallback: "EK", alt: "Eve" },
|
|
926
|
+
{ fallback: "FP", alt: "Frank" }, // overflows → shows +1
|
|
927
|
+
]}
|
|
928
|
+
max={5}
|
|
929
|
+
size="md"
|
|
930
|
+
spacing="normal"
|
|
931
|
+
/>;
|
|
932
|
+
```
|
|
933
|
+
|
|
934
|
+
| Prop | Values | Default |
|
|
935
|
+
| --------- | ------------------------ | -------- |
|
|
936
|
+
| `max` | number | `5` |
|
|
937
|
+
| `size` | `sm` `md` `lg` | `md` |
|
|
938
|
+
| `spacing` | `tight` `normal` `loose` | `normal` |
|
|
939
|
+
|
|
940
|
+
---
|
|
941
|
+
|
|
942
|
+
### NumberInput
|
|
943
|
+
|
|
944
|
+
```tsx
|
|
945
|
+
import { NumberInput } from "yems-ui";
|
|
946
|
+
|
|
947
|
+
const [qty, setQty] = useState(1);
|
|
948
|
+
|
|
949
|
+
<NumberInput value={qty} onChange={setQty} min={1} max={99} />
|
|
950
|
+
<NumberInput value={qty} onChange={setQty} step={5} size="lg" />
|
|
951
|
+
<NumberInput value={qty} onChange={setQty} error="Must be at least 1" />
|
|
952
|
+
```
|
|
953
|
+
|
|
954
|
+
| Prop | Type | Default |
|
|
955
|
+
| ---------- | ------------------------- | ----------- |
|
|
956
|
+
| `value` | `number` | `0` |
|
|
957
|
+
| `onChange` | `(value: number) => void` | — |
|
|
958
|
+
| `min` | `number` | `-Infinity` |
|
|
959
|
+
| `max` | `number` | `Infinity` |
|
|
960
|
+
| `step` | `number` | `1` |
|
|
961
|
+
| `size` | `sm` `md` `lg` | `md` |
|
|
962
|
+
|
|
963
|
+
---
|
|
964
|
+
|
|
965
|
+
### Layout Primitives
|
|
966
|
+
|
|
967
|
+
```tsx
|
|
968
|
+
import { Container, Stack, Grid, Divider } from "yems-ui";
|
|
969
|
+
|
|
970
|
+
// Container — max-width page wrapper
|
|
971
|
+
<Container size="xl" padded>
|
|
972
|
+
<YourPageContent />
|
|
973
|
+
</Container>
|
|
974
|
+
|
|
975
|
+
// Stack — flex column or row with gap
|
|
976
|
+
<Stack direction="col" gap={6}>
|
|
977
|
+
<Card>One</Card>
|
|
978
|
+
<Card>Two</Card>
|
|
979
|
+
</Stack>
|
|
980
|
+
|
|
981
|
+
<Stack direction="row" gap={4} align="center" justify="between">
|
|
982
|
+
<Logo />
|
|
983
|
+
<Nav />
|
|
984
|
+
</Stack>
|
|
985
|
+
|
|
986
|
+
// Grid — responsive columns
|
|
987
|
+
<Grid cols={1} mdCols={2} lgCols={3} gap={6}>
|
|
988
|
+
<Card>A</Card>
|
|
989
|
+
<Card>B</Card>
|
|
990
|
+
<Card>C</Card>
|
|
991
|
+
</Grid>
|
|
992
|
+
|
|
993
|
+
// Divider
|
|
994
|
+
<Divider />
|
|
995
|
+
<Divider label="or continue with" />
|
|
996
|
+
<Divider orientation="vertical" />
|
|
997
|
+
```
|
|
998
|
+
|
|
999
|
+
**Stack props:**
|
|
1000
|
+
|
|
1001
|
+
| Prop | Values | Default |
|
|
1002
|
+
| ----------- | -------------------------------------------------- | --------- |
|
|
1003
|
+
| `direction` | `col` `row` | `col` |
|
|
1004
|
+
| `gap` | `0` `1` `2` `3` `4` `6` `8` `10` `12` | `4` |
|
|
1005
|
+
| `align` | `start` `center` `end` `stretch` `baseline` | `stretch` |
|
|
1006
|
+
| `justify` | `start` `center` `end` `between` `around` `evenly` | `start` |
|
|
1007
|
+
| `wrap` | `boolean` | `false` |
|
|
1008
|
+
|
|
1009
|
+
---
|
|
1010
|
+
|
|
1011
|
+
## 🎨 Live Theme Builder
|
|
1012
|
+
|
|
1013
|
+
The [live demo](https://yem-ui.vercel.app) includes an interactive **Theme Builder** panel — click the **Customize** button in the bottom-right corner to:
|
|
1014
|
+
|
|
1015
|
+
- Pick from preset themes (Ocean, Forest, Rose, Slate, Sharp, Pill, Snappy)
|
|
1016
|
+
- Adjust primary and accent colors with a color picker
|
|
1017
|
+
- Tune border radius, glass blur, and animation speed with sliders
|
|
1018
|
+
- Copy the generated CSS to paste directly into your project
|
|
1019
|
+
|
|
1020
|
+
---
|
|
1021
|
+
|
|
1022
|
+
## 📝 License
|
|
1023
|
+
|
|
1024
|
+
MIT © Yemi Ogundairo
|
package/dist/index.d.mts
CHANGED
|
@@ -51,6 +51,19 @@ declare const Avatar: React.ForwardRefExoticComponent<Omit<AvatarPrimitive.Avata
|
|
|
51
51
|
declare const AvatarImage: React.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarImageProps & React.RefAttributes<HTMLImageElement>, "ref"> & React.RefAttributes<HTMLImageElement>>;
|
|
52
52
|
declare const AvatarFallback: React.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarFallbackProps & React.RefAttributes<HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
|
|
53
53
|
|
|
54
|
+
interface AvatarGroupItem {
|
|
55
|
+
src?: string;
|
|
56
|
+
fallback: string;
|
|
57
|
+
alt?: string;
|
|
58
|
+
}
|
|
59
|
+
interface AvatarGroupProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
60
|
+
avatars: AvatarGroupItem[];
|
|
61
|
+
max?: number;
|
|
62
|
+
size?: "sm" | "md" | "lg";
|
|
63
|
+
spacing?: "tight" | "normal" | "loose";
|
|
64
|
+
}
|
|
65
|
+
declare const AvatarGroup: React.ForwardRefExoticComponent<AvatarGroupProps & React.RefAttributes<HTMLDivElement>>;
|
|
66
|
+
|
|
54
67
|
declare const badgeVariants: (props?: {
|
|
55
68
|
variant?: "default" | "success" | "warning" | "error" | "primary" | "secondary" | "accent" | "ember" | "outline-primary" | "outline-secondary" | "outline-accent" | "outline-success" | "outline-warning" | "outline-error" | "soft-primary" | "soft-secondary" | "soft-accent" | "soft-success" | "soft-warning" | "soft-error";
|
|
56
69
|
size?: "default" | "sm" | "lg";
|
|
@@ -231,6 +244,55 @@ interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement
|
|
|
231
244
|
}
|
|
232
245
|
declare const Textarea: React.ForwardRefExoticComponent<TextareaProps & React.RefAttributes<HTMLTextAreaElement>>;
|
|
233
246
|
|
|
247
|
+
interface KbdProps extends React.HTMLAttributes<HTMLElement> {
|
|
248
|
+
size?: "sm" | "md" | "lg";
|
|
249
|
+
}
|
|
250
|
+
declare const Kbd: React.ForwardRefExoticComponent<KbdProps & React.RefAttributes<HTMLElement>>;
|
|
251
|
+
interface ShortcutProps {
|
|
252
|
+
keys: string[];
|
|
253
|
+
size?: "sm" | "md" | "lg";
|
|
254
|
+
className?: string;
|
|
255
|
+
}
|
|
256
|
+
declare const Shortcut: React.FC<ShortcutProps>;
|
|
257
|
+
|
|
258
|
+
interface ContainerProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
259
|
+
size?: "sm" | "md" | "lg" | "xl" | "full";
|
|
260
|
+
padded?: boolean;
|
|
261
|
+
}
|
|
262
|
+
declare const Container: React.ForwardRefExoticComponent<ContainerProps & React.RefAttributes<HTMLDivElement>>;
|
|
263
|
+
interface StackProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
264
|
+
direction?: "row" | "col";
|
|
265
|
+
gap?: 0 | 1 | 2 | 3 | 4 | 6 | 8 | 10 | 12;
|
|
266
|
+
align?: "start" | "center" | "end" | "stretch" | "baseline";
|
|
267
|
+
justify?: "start" | "center" | "end" | "between" | "around" | "evenly";
|
|
268
|
+
wrap?: boolean;
|
|
269
|
+
}
|
|
270
|
+
declare const Stack: React.ForwardRefExoticComponent<StackProps & React.RefAttributes<HTMLDivElement>>;
|
|
271
|
+
interface GridProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
272
|
+
cols?: 1 | 2 | 3 | 4 | 6 | 12;
|
|
273
|
+
mdCols?: 1 | 2 | 3 | 4 | 6 | 12;
|
|
274
|
+
lgCols?: 1 | 2 | 3 | 4 | 6 | 12;
|
|
275
|
+
gap?: 2 | 4 | 6 | 8;
|
|
276
|
+
}
|
|
277
|
+
declare const Grid: React.ForwardRefExoticComponent<GridProps & React.RefAttributes<HTMLDivElement>>;
|
|
278
|
+
interface DividerProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
279
|
+
label?: string;
|
|
280
|
+
orientation?: "horizontal" | "vertical";
|
|
281
|
+
}
|
|
282
|
+
declare const Divider: React.ForwardRefExoticComponent<DividerProps & React.RefAttributes<HTMLDivElement>>;
|
|
283
|
+
|
|
284
|
+
interface NumberInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "onChange" | "value" | "size"> {
|
|
285
|
+
value?: number;
|
|
286
|
+
onChange?: (value: number) => void;
|
|
287
|
+
min?: number;
|
|
288
|
+
max?: number;
|
|
289
|
+
step?: number;
|
|
290
|
+
size?: "sm" | "md" | "lg";
|
|
291
|
+
error?: string;
|
|
292
|
+
hint?: string;
|
|
293
|
+
}
|
|
294
|
+
declare const NumberInput: React.ForwardRefExoticComponent<NumberInputProps & React.RefAttributes<HTMLInputElement>>;
|
|
295
|
+
|
|
234
296
|
/**
|
|
235
297
|
* Pagination component with glassmorphism
|
|
236
298
|
* For navigating through pages of data
|
|
@@ -308,6 +370,22 @@ declare const SkeletonTable: React.FC<{
|
|
|
308
370
|
className?: string;
|
|
309
371
|
}>;
|
|
310
372
|
|
|
373
|
+
declare const spinnerVariants: (props?: {
|
|
374
|
+
size?: "sm" | "md" | "lg" | "xl" | "xs";
|
|
375
|
+
variant?: "primary" | "secondary" | "accent" | "white" | "muted";
|
|
376
|
+
} & class_variance_authority_types.ClassProp) => string;
|
|
377
|
+
interface SpinnerProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof spinnerVariants> {
|
|
378
|
+
label?: string;
|
|
379
|
+
}
|
|
380
|
+
declare const Spinner: React.ForwardRefExoticComponent<SpinnerProps & React.RefAttributes<HTMLDivElement>>;
|
|
381
|
+
interface LoadingOverlayProps {
|
|
382
|
+
loading: boolean;
|
|
383
|
+
children: React.ReactNode;
|
|
384
|
+
label?: string;
|
|
385
|
+
className?: string;
|
|
386
|
+
}
|
|
387
|
+
declare const LoadingOverlay: React.FC<LoadingOverlayProps>;
|
|
388
|
+
|
|
311
389
|
declare const Switch: React.ForwardRefExoticComponent<Omit<SwitchPrimitives.SwitchProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
|
|
312
390
|
|
|
313
391
|
declare const Table: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableElement> & React.RefAttributes<HTMLTableElement>>;
|
|
@@ -348,6 +426,41 @@ declare const Tooltip: React.FC<TooltipPrimitive.TooltipProps>;
|
|
|
348
426
|
declare const TooltipTrigger: React.ForwardRefExoticComponent<TooltipPrimitive.TooltipTriggerProps & React.RefAttributes<HTMLButtonElement>>;
|
|
349
427
|
declare const TooltipContent: React.ForwardRefExoticComponent<Omit<TooltipPrimitive.TooltipContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
350
428
|
|
|
429
|
+
declare const headingVariants: (props?: {
|
|
430
|
+
size?: "md" | "lg" | "xl" | "4xl" | "3xl" | "2xl";
|
|
431
|
+
weight?: "medium" | "bold" | "normal" | "light" | "semibold" | "black";
|
|
432
|
+
align?: "center" | "left" | "right";
|
|
433
|
+
gradient?: "none" | "primary" | "accent" | "cool";
|
|
434
|
+
} & class_variance_authority_types.ClassProp) => string;
|
|
435
|
+
type HeadingLevel = "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
|
|
436
|
+
interface HeadingProps extends React.HTMLAttributes<HTMLHeadingElement>, VariantProps<typeof headingVariants> {
|
|
437
|
+
as?: HeadingLevel;
|
|
438
|
+
}
|
|
439
|
+
declare const Heading: React.ForwardRefExoticComponent<HeadingProps & React.RefAttributes<HTMLHeadingElement>>;
|
|
440
|
+
declare const textVariants: (props?: {
|
|
441
|
+
size?: "sm" | "md" | "lg" | "xl" | "xs";
|
|
442
|
+
weight?: "medium" | "bold" | "normal" | "light" | "semibold";
|
|
443
|
+
variant?: "default" | "success" | "warning" | "error" | "primary" | "accent" | "muted";
|
|
444
|
+
align?: "center" | "left" | "right" | "justify";
|
|
445
|
+
leading?: "tight" | "normal" | "loose" | "snug" | "relaxed";
|
|
446
|
+
truncate?: boolean;
|
|
447
|
+
} & class_variance_authority_types.ClassProp) => string;
|
|
448
|
+
type TextElement = "p" | "span" | "div" | "label" | "small" | "strong" | "em";
|
|
449
|
+
interface TextProps extends React.HTMLAttributes<HTMLElement>, VariantProps<typeof textVariants> {
|
|
450
|
+
as?: TextElement;
|
|
451
|
+
}
|
|
452
|
+
declare const Text: React.ForwardRefExoticComponent<TextProps & React.RefAttributes<HTMLElement>>;
|
|
453
|
+
interface CodeProps extends React.HTMLAttributes<HTMLElement> {
|
|
454
|
+
block?: boolean;
|
|
455
|
+
}
|
|
456
|
+
declare const Code: React.ForwardRefExoticComponent<CodeProps & React.RefAttributes<HTMLElement>>;
|
|
457
|
+
interface LeadProps extends React.HTMLAttributes<HTMLParagraphElement> {
|
|
458
|
+
}
|
|
459
|
+
declare const Lead: React.ForwardRefExoticComponent<LeadProps & React.RefAttributes<HTMLParagraphElement>>;
|
|
460
|
+
interface BlockquoteProps extends React.HTMLAttributes<HTMLQuoteElement> {
|
|
461
|
+
}
|
|
462
|
+
declare const Blockquote: React.ForwardRefExoticComponent<BlockquoteProps & React.RefAttributes<HTMLQuoteElement>>;
|
|
463
|
+
|
|
351
464
|
type ToasterToast = ToastProps & {
|
|
352
465
|
id: string;
|
|
353
466
|
title?: React.ReactNode;
|
|
@@ -428,4 +541,4 @@ declare function sleep(ms: number): Promise<void>;
|
|
|
428
541
|
*/
|
|
429
542
|
declare function generateId(): string;
|
|
430
543
|
|
|
431
|
-
export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, type AlertProps, AlertTitle, Avatar, AvatarFallback, AvatarImage, Badge, type BadgeProps, type BreadcrumbItem, Breadcrumbs, type BreadcrumbsProps, Button, type ButtonProps, Card, CardContent, CardDescription, CardFooter, CardHeader, type CardProps, CardTitle, Checkbox, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, type EmptyStateProps, FormField, type FormFieldProps, IconButton, type IconButtonProps, Input, type InputProps, Label, type LabelProps, Pagination, type PaginationProps, Popover, PopoverContent, PopoverTrigger, Progress, RadioGroup, RadioGroupItem, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Skeleton, SkeletonAvatar, SkeletonCard, type SkeletonProps, SkeletonTable, SkeletonText, StatCard, type StatCardProps, StatusBadge, type StatusBadgeProps, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, type TextareaProps, Toast$1 as Toast, ToastAction, type ToastActionElement, ToastClose, ToastDescription, type ToastProps, ToastProvider, ToastTitle, ToastViewport, Toaster, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, badgeVariants, buttonVariants, cn, debounce, formatCurrency, formatDate, formatRelativeTime, generateId, getInitials, inputVariants, reducer, sleep, toast, truncate, useToast };
|
|
544
|
+
export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, type AlertProps, AlertTitle, Avatar, AvatarFallback, AvatarGroup, type AvatarGroupItem, type AvatarGroupProps, AvatarImage, Badge, type BadgeProps, Blockquote, type BlockquoteProps, type BreadcrumbItem, Breadcrumbs, type BreadcrumbsProps, Button, type ButtonProps, Card, CardContent, CardDescription, CardFooter, CardHeader, type CardProps, CardTitle, Checkbox, Code, type CodeProps, Container, type ContainerProps, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Divider, type DividerProps, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, type EmptyStateProps, FormField, type FormFieldProps, Grid, type GridProps, Heading, type HeadingProps, IconButton, type IconButtonProps, Input, type InputProps, Kbd, type KbdProps, Label, type LabelProps, Lead, type LeadProps, LoadingOverlay, type LoadingOverlayProps, NumberInput, type NumberInputProps, Pagination, type PaginationProps, Popover, PopoverContent, PopoverTrigger, Progress, RadioGroup, RadioGroupItem, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Shortcut, type ShortcutProps, Skeleton, SkeletonAvatar, SkeletonCard, type SkeletonProps, SkeletonTable, SkeletonText, Spinner, type SpinnerProps, Stack, type StackProps, StatCard, type StatCardProps, StatusBadge, type StatusBadgeProps, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Text, type TextProps, Textarea, type TextareaProps, Toast$1 as Toast, ToastAction, type ToastActionElement, ToastClose, ToastDescription, type ToastProps, ToastProvider, ToastTitle, ToastViewport, Toaster, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, badgeVariants, buttonVariants, cn, debounce, formatCurrency, formatDate, formatRelativeTime, generateId, getInitials, headingVariants, inputVariants, reducer, sleep, spinnerVariants, textVariants, toast, truncate, useToast };
|
package/dist/index.d.ts
CHANGED
|
@@ -51,6 +51,19 @@ declare const Avatar: React.ForwardRefExoticComponent<Omit<AvatarPrimitive.Avata
|
|
|
51
51
|
declare const AvatarImage: React.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarImageProps & React.RefAttributes<HTMLImageElement>, "ref"> & React.RefAttributes<HTMLImageElement>>;
|
|
52
52
|
declare const AvatarFallback: React.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarFallbackProps & React.RefAttributes<HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
|
|
53
53
|
|
|
54
|
+
interface AvatarGroupItem {
|
|
55
|
+
src?: string;
|
|
56
|
+
fallback: string;
|
|
57
|
+
alt?: string;
|
|
58
|
+
}
|
|
59
|
+
interface AvatarGroupProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
60
|
+
avatars: AvatarGroupItem[];
|
|
61
|
+
max?: number;
|
|
62
|
+
size?: "sm" | "md" | "lg";
|
|
63
|
+
spacing?: "tight" | "normal" | "loose";
|
|
64
|
+
}
|
|
65
|
+
declare const AvatarGroup: React.ForwardRefExoticComponent<AvatarGroupProps & React.RefAttributes<HTMLDivElement>>;
|
|
66
|
+
|
|
54
67
|
declare const badgeVariants: (props?: {
|
|
55
68
|
variant?: "default" | "success" | "warning" | "error" | "primary" | "secondary" | "accent" | "ember" | "outline-primary" | "outline-secondary" | "outline-accent" | "outline-success" | "outline-warning" | "outline-error" | "soft-primary" | "soft-secondary" | "soft-accent" | "soft-success" | "soft-warning" | "soft-error";
|
|
56
69
|
size?: "default" | "sm" | "lg";
|
|
@@ -231,6 +244,55 @@ interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement
|
|
|
231
244
|
}
|
|
232
245
|
declare const Textarea: React.ForwardRefExoticComponent<TextareaProps & React.RefAttributes<HTMLTextAreaElement>>;
|
|
233
246
|
|
|
247
|
+
interface KbdProps extends React.HTMLAttributes<HTMLElement> {
|
|
248
|
+
size?: "sm" | "md" | "lg";
|
|
249
|
+
}
|
|
250
|
+
declare const Kbd: React.ForwardRefExoticComponent<KbdProps & React.RefAttributes<HTMLElement>>;
|
|
251
|
+
interface ShortcutProps {
|
|
252
|
+
keys: string[];
|
|
253
|
+
size?: "sm" | "md" | "lg";
|
|
254
|
+
className?: string;
|
|
255
|
+
}
|
|
256
|
+
declare const Shortcut: React.FC<ShortcutProps>;
|
|
257
|
+
|
|
258
|
+
interface ContainerProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
259
|
+
size?: "sm" | "md" | "lg" | "xl" | "full";
|
|
260
|
+
padded?: boolean;
|
|
261
|
+
}
|
|
262
|
+
declare const Container: React.ForwardRefExoticComponent<ContainerProps & React.RefAttributes<HTMLDivElement>>;
|
|
263
|
+
interface StackProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
264
|
+
direction?: "row" | "col";
|
|
265
|
+
gap?: 0 | 1 | 2 | 3 | 4 | 6 | 8 | 10 | 12;
|
|
266
|
+
align?: "start" | "center" | "end" | "stretch" | "baseline";
|
|
267
|
+
justify?: "start" | "center" | "end" | "between" | "around" | "evenly";
|
|
268
|
+
wrap?: boolean;
|
|
269
|
+
}
|
|
270
|
+
declare const Stack: React.ForwardRefExoticComponent<StackProps & React.RefAttributes<HTMLDivElement>>;
|
|
271
|
+
interface GridProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
272
|
+
cols?: 1 | 2 | 3 | 4 | 6 | 12;
|
|
273
|
+
mdCols?: 1 | 2 | 3 | 4 | 6 | 12;
|
|
274
|
+
lgCols?: 1 | 2 | 3 | 4 | 6 | 12;
|
|
275
|
+
gap?: 2 | 4 | 6 | 8;
|
|
276
|
+
}
|
|
277
|
+
declare const Grid: React.ForwardRefExoticComponent<GridProps & React.RefAttributes<HTMLDivElement>>;
|
|
278
|
+
interface DividerProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
279
|
+
label?: string;
|
|
280
|
+
orientation?: "horizontal" | "vertical";
|
|
281
|
+
}
|
|
282
|
+
declare const Divider: React.ForwardRefExoticComponent<DividerProps & React.RefAttributes<HTMLDivElement>>;
|
|
283
|
+
|
|
284
|
+
interface NumberInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "onChange" | "value" | "size"> {
|
|
285
|
+
value?: number;
|
|
286
|
+
onChange?: (value: number) => void;
|
|
287
|
+
min?: number;
|
|
288
|
+
max?: number;
|
|
289
|
+
step?: number;
|
|
290
|
+
size?: "sm" | "md" | "lg";
|
|
291
|
+
error?: string;
|
|
292
|
+
hint?: string;
|
|
293
|
+
}
|
|
294
|
+
declare const NumberInput: React.ForwardRefExoticComponent<NumberInputProps & React.RefAttributes<HTMLInputElement>>;
|
|
295
|
+
|
|
234
296
|
/**
|
|
235
297
|
* Pagination component with glassmorphism
|
|
236
298
|
* For navigating through pages of data
|
|
@@ -308,6 +370,22 @@ declare const SkeletonTable: React.FC<{
|
|
|
308
370
|
className?: string;
|
|
309
371
|
}>;
|
|
310
372
|
|
|
373
|
+
declare const spinnerVariants: (props?: {
|
|
374
|
+
size?: "sm" | "md" | "lg" | "xl" | "xs";
|
|
375
|
+
variant?: "primary" | "secondary" | "accent" | "white" | "muted";
|
|
376
|
+
} & class_variance_authority_types.ClassProp) => string;
|
|
377
|
+
interface SpinnerProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof spinnerVariants> {
|
|
378
|
+
label?: string;
|
|
379
|
+
}
|
|
380
|
+
declare const Spinner: React.ForwardRefExoticComponent<SpinnerProps & React.RefAttributes<HTMLDivElement>>;
|
|
381
|
+
interface LoadingOverlayProps {
|
|
382
|
+
loading: boolean;
|
|
383
|
+
children: React.ReactNode;
|
|
384
|
+
label?: string;
|
|
385
|
+
className?: string;
|
|
386
|
+
}
|
|
387
|
+
declare const LoadingOverlay: React.FC<LoadingOverlayProps>;
|
|
388
|
+
|
|
311
389
|
declare const Switch: React.ForwardRefExoticComponent<Omit<SwitchPrimitives.SwitchProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
|
|
312
390
|
|
|
313
391
|
declare const Table: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableElement> & React.RefAttributes<HTMLTableElement>>;
|
|
@@ -348,6 +426,41 @@ declare const Tooltip: React.FC<TooltipPrimitive.TooltipProps>;
|
|
|
348
426
|
declare const TooltipTrigger: React.ForwardRefExoticComponent<TooltipPrimitive.TooltipTriggerProps & React.RefAttributes<HTMLButtonElement>>;
|
|
349
427
|
declare const TooltipContent: React.ForwardRefExoticComponent<Omit<TooltipPrimitive.TooltipContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
350
428
|
|
|
429
|
+
declare const headingVariants: (props?: {
|
|
430
|
+
size?: "md" | "lg" | "xl" | "4xl" | "3xl" | "2xl";
|
|
431
|
+
weight?: "medium" | "bold" | "normal" | "light" | "semibold" | "black";
|
|
432
|
+
align?: "center" | "left" | "right";
|
|
433
|
+
gradient?: "none" | "primary" | "accent" | "cool";
|
|
434
|
+
} & class_variance_authority_types.ClassProp) => string;
|
|
435
|
+
type HeadingLevel = "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
|
|
436
|
+
interface HeadingProps extends React.HTMLAttributes<HTMLHeadingElement>, VariantProps<typeof headingVariants> {
|
|
437
|
+
as?: HeadingLevel;
|
|
438
|
+
}
|
|
439
|
+
declare const Heading: React.ForwardRefExoticComponent<HeadingProps & React.RefAttributes<HTMLHeadingElement>>;
|
|
440
|
+
declare const textVariants: (props?: {
|
|
441
|
+
size?: "sm" | "md" | "lg" | "xl" | "xs";
|
|
442
|
+
weight?: "medium" | "bold" | "normal" | "light" | "semibold";
|
|
443
|
+
variant?: "default" | "success" | "warning" | "error" | "primary" | "accent" | "muted";
|
|
444
|
+
align?: "center" | "left" | "right" | "justify";
|
|
445
|
+
leading?: "tight" | "normal" | "loose" | "snug" | "relaxed";
|
|
446
|
+
truncate?: boolean;
|
|
447
|
+
} & class_variance_authority_types.ClassProp) => string;
|
|
448
|
+
type TextElement = "p" | "span" | "div" | "label" | "small" | "strong" | "em";
|
|
449
|
+
interface TextProps extends React.HTMLAttributes<HTMLElement>, VariantProps<typeof textVariants> {
|
|
450
|
+
as?: TextElement;
|
|
451
|
+
}
|
|
452
|
+
declare const Text: React.ForwardRefExoticComponent<TextProps & React.RefAttributes<HTMLElement>>;
|
|
453
|
+
interface CodeProps extends React.HTMLAttributes<HTMLElement> {
|
|
454
|
+
block?: boolean;
|
|
455
|
+
}
|
|
456
|
+
declare const Code: React.ForwardRefExoticComponent<CodeProps & React.RefAttributes<HTMLElement>>;
|
|
457
|
+
interface LeadProps extends React.HTMLAttributes<HTMLParagraphElement> {
|
|
458
|
+
}
|
|
459
|
+
declare const Lead: React.ForwardRefExoticComponent<LeadProps & React.RefAttributes<HTMLParagraphElement>>;
|
|
460
|
+
interface BlockquoteProps extends React.HTMLAttributes<HTMLQuoteElement> {
|
|
461
|
+
}
|
|
462
|
+
declare const Blockquote: React.ForwardRefExoticComponent<BlockquoteProps & React.RefAttributes<HTMLQuoteElement>>;
|
|
463
|
+
|
|
351
464
|
type ToasterToast = ToastProps & {
|
|
352
465
|
id: string;
|
|
353
466
|
title?: React.ReactNode;
|
|
@@ -428,4 +541,4 @@ declare function sleep(ms: number): Promise<void>;
|
|
|
428
541
|
*/
|
|
429
542
|
declare function generateId(): string;
|
|
430
543
|
|
|
431
|
-
export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, type AlertProps, AlertTitle, Avatar, AvatarFallback, AvatarImage, Badge, type BadgeProps, type BreadcrumbItem, Breadcrumbs, type BreadcrumbsProps, Button, type ButtonProps, Card, CardContent, CardDescription, CardFooter, CardHeader, type CardProps, CardTitle, Checkbox, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, type EmptyStateProps, FormField, type FormFieldProps, IconButton, type IconButtonProps, Input, type InputProps, Label, type LabelProps, Pagination, type PaginationProps, Popover, PopoverContent, PopoverTrigger, Progress, RadioGroup, RadioGroupItem, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Skeleton, SkeletonAvatar, SkeletonCard, type SkeletonProps, SkeletonTable, SkeletonText, StatCard, type StatCardProps, StatusBadge, type StatusBadgeProps, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, type TextareaProps, Toast$1 as Toast, ToastAction, type ToastActionElement, ToastClose, ToastDescription, type ToastProps, ToastProvider, ToastTitle, ToastViewport, Toaster, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, badgeVariants, buttonVariants, cn, debounce, formatCurrency, formatDate, formatRelativeTime, generateId, getInitials, inputVariants, reducer, sleep, toast, truncate, useToast };
|
|
544
|
+
export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, type AlertProps, AlertTitle, Avatar, AvatarFallback, AvatarGroup, type AvatarGroupItem, type AvatarGroupProps, AvatarImage, Badge, type BadgeProps, Blockquote, type BlockquoteProps, type BreadcrumbItem, Breadcrumbs, type BreadcrumbsProps, Button, type ButtonProps, Card, CardContent, CardDescription, CardFooter, CardHeader, type CardProps, CardTitle, Checkbox, Code, type CodeProps, Container, type ContainerProps, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Divider, type DividerProps, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, type EmptyStateProps, FormField, type FormFieldProps, Grid, type GridProps, Heading, type HeadingProps, IconButton, type IconButtonProps, Input, type InputProps, Kbd, type KbdProps, Label, type LabelProps, Lead, type LeadProps, LoadingOverlay, type LoadingOverlayProps, NumberInput, type NumberInputProps, Pagination, type PaginationProps, Popover, PopoverContent, PopoverTrigger, Progress, RadioGroup, RadioGroupItem, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Shortcut, type ShortcutProps, Skeleton, SkeletonAvatar, SkeletonCard, type SkeletonProps, SkeletonTable, SkeletonText, Spinner, type SpinnerProps, Stack, type StackProps, StatCard, type StatCardProps, StatusBadge, type StatusBadgeProps, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Text, type TextProps, Textarea, type TextareaProps, Toast$1 as Toast, ToastAction, type ToastActionElement, ToastClose, ToastDescription, type ToastProps, ToastProvider, ToastTitle, ToastViewport, Toaster, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, badgeVariants, buttonVariants, cn, debounce, formatCurrency, formatDate, formatRelativeTime, generateId, getInitials, headingVariants, inputVariants, reducer, sleep, spinnerVariants, textVariants, toast, truncate, useToast };
|