@kimdw-rtk/ui 0.0.31 → 0.1.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/dist/components/Accordion/Accordion.d.ts +1 -1
- package/dist/components/Accordion/Accordion.d.ts.map +1 -1
- package/dist/components/Accordion/AccordionTrigger.js +1 -1
- package/dist/components/Box/index.d.ts +2 -2
- package/dist/components/Box/index.d.ts.map +1 -1
- package/dist/components/Button/index.d.ts +2 -2
- package/dist/components/Button/index.d.ts.map +1 -1
- package/dist/components/Button/index.js +5 -3
- package/dist/components/Card/Card.css.d.ts +31 -0
- package/dist/components/Card/Card.css.d.ts.map +1 -1
- package/dist/components/Card/Card.css.js +3 -2
- package/dist/components/Card/Card.css.ts.vanilla.css +55 -38
- package/dist/components/Card/Card.d.ts +1 -1
- package/dist/components/Card/Card.d.ts.map +1 -1
- package/dist/components/Card/Card.js +2 -2
- package/dist/components/Card/CardContent.css.d.ts.map +1 -1
- package/dist/components/Card/CardContent.css.js +2 -0
- package/dist/components/Card/CardContent.css.ts.vanilla.css +1 -1
- package/dist/components/Card/CardContent.d.ts +1 -1
- package/dist/components/Card/CardContent.d.ts.map +1 -1
- package/dist/components/Card/CardHeader.css.d.ts +2 -0
- package/dist/components/Card/CardHeader.css.d.ts.map +1 -0
- package/dist/components/Card/CardHeader.css.js +10 -0
- package/dist/components/Card/CardHeader.css.ts.vanilla.css +7 -0
- package/dist/components/Card/CardHeader.d.ts +5 -0
- package/dist/components/Card/CardHeader.d.ts.map +1 -0
- package/dist/components/Card/CardHeader.js +12 -0
- package/dist/components/Card/CardInteraction.d.ts +1 -1
- package/dist/components/Card/CardInteraction.d.ts.map +1 -1
- package/dist/components/Card/CardThumbnail.css.d.ts.map +1 -1
- package/dist/components/Card/CardThumbnail.css.ts.vanilla.css +1 -2
- package/dist/components/Card/CardThumbnail.d.ts +1 -1
- package/dist/components/Card/CardThumbnail.d.ts.map +1 -1
- package/dist/components/Card/index.d.ts +1 -0
- package/dist/components/Card/index.d.ts.map +1 -1
- package/dist/components/Chip/Chip.d.ts +1 -1
- package/dist/components/Chip/Chip.d.ts.map +1 -1
- package/dist/components/Confirm/index.js +1 -1
- package/dist/components/Container/Container.css.d.ts +4 -0
- package/dist/components/Container/Container.css.d.ts.map +1 -0
- package/dist/components/Container/Container.css.js +9 -0
- package/dist/components/Container/Container.css.ts.vanilla.css +16 -0
- package/dist/components/Container/index.d.ts +7 -0
- package/dist/components/Container/index.d.ts.map +1 -0
- package/dist/components/Container/index.js +14 -0
- package/dist/components/Dialog/Dialog.d.ts +1 -1
- package/dist/components/Dialog/Dialog.d.ts.map +1 -1
- package/dist/components/Dialog/Dialog.js +1 -1
- package/dist/components/Dialog/DialogContent.d.ts +1 -1
- package/dist/components/Dialog/DialogContent.d.ts.map +1 -1
- package/dist/components/Dialog/DialogFooter.d.ts +1 -1
- package/dist/components/Dialog/DialogFooter.d.ts.map +1 -1
- package/dist/components/Dialog/DialogFooter.js +1 -1
- package/dist/components/Dialog/DialogHeader.d.ts +1 -1
- package/dist/components/Dialog/DialogHeader.d.ts.map +1 -1
- package/dist/components/Dialog/DialogHeader.js +1 -1
- package/dist/components/Flex/Flex.css.d.ts +2 -0
- package/dist/components/Flex/Flex.css.d.ts.map +1 -0
- package/dist/components/Flex/Flex.css.js +8 -0
- package/dist/components/Flex/Flex.css.ts.vanilla.css +6 -0
- package/dist/components/Flex/index.d.ts +6 -0
- package/dist/components/Flex/index.d.ts.map +1 -0
- package/dist/components/Flex/index.js +14 -0
- package/dist/components/Navigation/NavigationAside.d.ts +1 -1
- package/dist/components/Navigation/NavigationAside.d.ts.map +1 -1
- package/dist/components/Navigation/NavigationBar.css.d.ts +8 -0
- package/dist/components/Navigation/NavigationBar.css.d.ts.map +1 -1
- package/dist/components/Navigation/NavigationBar.css.js +1 -1
- package/dist/components/Navigation/NavigationBar.css.ts.vanilla.css +7 -1
- package/dist/components/Navigation/NavigationBar.d.ts +1 -1
- package/dist/components/Navigation/NavigationBar.d.ts.map +1 -1
- package/dist/components/Navigation/NavigationBar.js +4 -1
- package/dist/components/Navigation/NavigationContainer.d.ts +149 -4
- package/dist/components/Navigation/NavigationContainer.d.ts.map +1 -1
- package/dist/components/Navigation/NavigationContainer.js +2 -1
- package/dist/components/Navigation/NavigationDrawer.js +1 -1
- package/dist/components/Navigation/NavigationItem.d.ts +1 -1
- package/dist/components/Navigation/NavigationItem.d.ts.map +1 -1
- package/dist/components/Navigation/NavigationItem.js +1 -1
- package/dist/components/Navigation/NavigationLogo.d.ts +1 -1
- package/dist/components/Navigation/NavigationLogo.d.ts.map +1 -1
- package/dist/components/Navigation/NavigationMenu.d.ts +1 -1
- package/dist/components/Navigation/NavigationMenu.d.ts.map +1 -1
- package/dist/components/Range/Range.d.ts +1 -1
- package/dist/components/Range/Range.d.ts.map +1 -1
- package/dist/components/ScrollArea/ScrollArea.d.ts +1 -1
- package/dist/components/ScrollArea/ScrollArea.d.ts.map +1 -1
- package/dist/components/Select/Select.d.ts +1 -1
- package/dist/components/Select/Select.d.ts.map +1 -1
- package/dist/components/Select/Select.js +1 -1
- package/dist/components/Select/SelectTrigger.d.ts +1 -1
- package/dist/components/Select/SelectTrigger.d.ts.map +1 -1
- package/dist/components/Separator/index.d.ts +8 -0
- package/dist/components/Separator/index.d.ts.map +1 -0
- package/dist/components/Separator/index.js +9 -0
- package/dist/components/Skeleton/index.d.ts +1 -1
- package/dist/components/Skeleton/index.d.ts.map +1 -1
- package/dist/components/Table/Table.css.d.ts +25 -1
- package/dist/components/Table/Table.css.d.ts.map +1 -1
- package/dist/components/Table/Table.css.js +5 -3
- package/dist/components/Table/Table.css.ts.vanilla.css +13 -1
- package/dist/components/Table/Table.d.ts +2 -2
- package/dist/components/Table/Table.d.ts.map +1 -1
- package/dist/components/Table/Table.js +2 -2
- package/dist/components/Table/TableBody.d.ts +1 -1
- package/dist/components/Table/TableBody.d.ts.map +1 -1
- package/dist/components/Table/TableCell.css.d.ts.map +1 -1
- package/dist/components/Table/TableCell.css.ts.vanilla.css +6 -3
- package/dist/components/Table/TableCell.d.ts +1 -1
- package/dist/components/Table/TableCell.d.ts.map +1 -1
- package/dist/components/Table/TableCell.js +1 -1
- package/dist/components/Table/TableHead.d.ts +1 -1
- package/dist/components/Table/TableHead.d.ts.map +1 -1
- package/dist/components/Table/TableHead.js +1 -1
- package/dist/components/Table/TableHeader.d.ts +1 -1
- package/dist/components/Table/TableHeader.d.ts.map +1 -1
- package/dist/components/Table/TableRow.d.ts +1 -1
- package/dist/components/Table/TableRow.d.ts.map +1 -1
- package/dist/components/Tabs/Tabs.d.ts +1 -1
- package/dist/components/Tabs/Tabs.d.ts.map +1 -1
- package/dist/components/Tabs/TabsContent.d.ts +1 -1
- package/dist/components/Tabs/TabsContent.d.ts.map +1 -1
- package/dist/components/Tabs/TabsList.d.ts +1 -1
- package/dist/components/Tabs/TabsList.d.ts.map +1 -1
- package/dist/components/Tabs/TabsTrigger.d.ts +1 -1
- package/dist/components/Tabs/TabsTrigger.d.ts.map +1 -1
- package/dist/components/TextField/TextField.css.d.ts.map +1 -1
- package/dist/components/TextField/TextField.css.ts.vanilla.css +3 -1
- package/dist/components/TextField/index.d.ts +1 -1
- package/dist/components/TextField/index.d.ts.map +1 -1
- package/dist/components/TextField/index.js +1 -1
- package/dist/components/Toast/index.d.ts +1 -1
- package/dist/components/Toast/index.d.ts.map +1 -1
- package/dist/components/Toast/index.js +1 -1
- package/dist/components/Tooltip/Tooltip.css.d.ts +14 -0
- package/dist/components/Tooltip/Tooltip.css.d.ts.map +1 -0
- package/dist/components/Tooltip/Tooltip.css.js +9 -0
- package/dist/components/Tooltip/Tooltip.css.ts.vanilla.css +33 -0
- package/dist/components/Tooltip/index.d.ts +13 -0
- package/dist/components/Tooltip/index.d.ts.map +1 -0
- package/dist/components/Tooltip/index.js +32 -0
- package/dist/components/Typography/Typography.css.d.ts +7 -0
- package/dist/components/Typography/Typography.css.d.ts.map +1 -1
- package/dist/components/Typography/Typography.css.js +1 -1
- package/dist/components/Typography/Typography.css.ts.vanilla.css +5 -0
- package/dist/components/Typography/index.d.ts +7 -2
- package/dist/components/Typography/index.d.ts.map +1 -1
- package/dist/components/Typography/index.js +12 -2
- package/dist/components/index.d.ts +4 -0
- package/dist/components/index.d.ts.map +1 -1
- package/dist/contexts/UIProvider.d.ts +2 -1
- package/dist/contexts/UIProvider.d.ts.map +1 -1
- package/dist/contexts/UIProvider.js +4 -3
- package/dist/hooks/index.d.ts +2 -0
- package/dist/hooks/index.d.ts.map +1 -1
- package/dist/hooks/useContainer/ContainerProvider.d.ts +9 -0
- package/dist/hooks/useContainer/ContainerProvider.d.ts.map +1 -0
- package/dist/hooks/useContainer/ContainerProvider.js +10 -0
- package/dist/hooks/useContainer/index.d.ts +2 -0
- package/dist/hooks/useContainer/index.d.ts.map +1 -0
- package/dist/hooks/useContainer/index.js +12 -0
- package/dist/hooks/useDialog/index.js +1 -1
- package/dist/hooks/usePointerSlider/index.js +2 -2
- package/dist/hooks/useToast/ToastContainer.css.d.ts.map +1 -1
- package/dist/hooks/useToast/ToastContainer.css.ts.vanilla.css +1 -0
- package/dist/hooks/useToast/ToastProvider.d.ts +1 -1
- package/dist/hooks/useToast/ToastProvider.d.ts.map +1 -1
- package/dist/hooks/useToast/ToastProvider.js +10 -7
- package/dist/index.d.ts +1 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +14 -1
- package/dist/styles/sprinkles.css.d.ts +1957 -52
- package/dist/styles/sprinkles.css.d.ts.map +1 -1
- package/dist/styles/sprinkles.css.js +7 -5
- package/dist/styles/sprinkles.css.ts.vanilla.css +3021 -1167
- package/dist/styles/sx.d.ts +1 -1
- package/dist/styles/sx.d.ts.map +1 -1
- package/dist/tests/uiTest.d.ts.map +1 -1
- package/dist/tokens/index.d.ts +2 -1
- package/dist/tokens/index.d.ts.map +1 -1
- package/dist/tokens/scale/color.js +578 -0
- package/dist/tokens/semantic/breakpoint.d.ts +4 -4
- package/dist/tokens/semantic/breakpoint.d.ts.map +1 -1
- package/dist/tokens/semantic/breakpoint.js +8 -0
- package/dist/tokens/semantic/color.js +12 -0
- package/dist/tokens/semantic/spacing.d.ts +2 -0
- package/dist/tokens/semantic/spacing.d.ts.map +1 -1
- package/dist/tokens/semantic/spacing.js +13 -0
- package/dist/tokens/semantic/typography.js +34 -0
- package/dist/tokens/semantic/width.d.ts +6 -0
- package/dist/tokens/semantic/width.d.ts.map +1 -0
- package/dist/tokens/semantic/width.js +7 -0
- package/dist/types/ui.types.d.ts +1 -1
- package/dist/types/ui.types.d.ts.map +1 -1
- package/dist/utils/sprinklesUtils.d.ts +1 -1
- package/dist/utils/sprinklesUtils.d.ts.map +1 -1
- package/package.json +15 -9
|
@@ -43,7 +43,7 @@ const Select = forwardRef(({ children, className, style, name, defaultValue, wid
|
|
|
43
43
|
onChange(state.selected);
|
|
44
44
|
//eslint-disable-next-line
|
|
45
45
|
}, [state.selected]);
|
|
46
|
-
return (jsx(SelectContext.Provider, { value: { state, dispatch }, children: jsxs("div", { ref: targetRef,
|
|
46
|
+
return (jsx(SelectContext.Provider, { value: { state, dispatch }, children: jsxs("div", { ref: targetRef, className: clsx(select({ size }), className, sx(propSx)), style: { ...style, width }, ...props, children: [jsx(SelectTrigger, { variant: variant, children: state.selected !== null && state.items.get(state.selected || '') }), jsx(SelectOptionList, { children: children }), jsx("input", { name: name, type: "hidden", value: state.selected || '' })] }) }));
|
|
47
47
|
});
|
|
48
48
|
Select.displayName = 'Select';
|
|
49
49
|
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import type { UIComponent } from '
|
|
1
|
+
import type { UIComponent } from '#types';
|
|
2
2
|
import * as s from './SelectTrigger.css';
|
|
3
3
|
type SelectTriggerProps = UIComponent<'div', typeof s.selectTrigger>;
|
|
4
4
|
declare const SelectTrigger: ({ children, className, variant, sx: propSx, }: SelectTriggerProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SelectTrigger.d.ts","sourceRoot":"","sources":["../../../src/components/Select/SelectTrigger.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,
|
|
1
|
+
{"version":3,"file":"SelectTrigger.d.ts","sourceRoot":"","sources":["../../../src/components/Select/SelectTrigger.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,QAAQ,CAAC;AAG1C,OAAO,KAAK,CAAC,MAAM,qBAAqB,CAAC;AAEzC,KAAK,kBAAkB,GAAG,WAAW,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC,aAAa,CAAC,CAAC;AAErE,QAAA,MAAM,aAAa,GAAI,+CAKpB,kBAAkB,4CA4BpB,CAAC;AAEF,eAAe,aAAa,CAAC"}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { type ReactElement, type ReactNode } from 'react';
|
|
2
|
+
interface SeparatorProps {
|
|
3
|
+
children: ReactElement | ReactElement[];
|
|
4
|
+
separator: ReactNode;
|
|
5
|
+
}
|
|
6
|
+
export declare const Separator: ({ children, separator }: SeparatorProps) => import("react/jsx-runtime").JSX.Element;
|
|
7
|
+
export {};
|
|
8
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Separator/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAY,KAAK,YAAY,EAAE,KAAK,SAAS,EAAY,MAAM,OAAO,CAAC;AAE9E,UAAU,cAAc;IACtB,QAAQ,EAAE,YAAY,GAAG,YAAY,EAAE,CAAC;IACxC,SAAS,EAAE,SAAS,CAAC;CACtB;AAED,eAAO,MAAM,SAAS,GAAI,yBAAyB,cAAc,4CAahE,CAAC"}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
|
|
2
|
+
import { Children, Fragment as Fragment$1 } from 'react';
|
|
3
|
+
|
|
4
|
+
const Separator = ({ children, separator }) => {
|
|
5
|
+
const items = Children.toArray(children);
|
|
6
|
+
return (jsx(Fragment, { children: items.map((child, index) => (jsxs(Fragment$1, { children: [index > 0 && separator, child] }, child.key || index))) }));
|
|
7
|
+
};
|
|
8
|
+
|
|
9
|
+
export { Separator };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Skeleton/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,KAAK,aAAa,EAAE,MAAM,OAAO,CAAC;AAKvD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Skeleton/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,KAAK,aAAa,EAAE,MAAM,OAAO,CAAC;AAKvD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,QAAQ,CAAC;AAI1C,UAAU,aAAc,SAAQ,WAAW,CAAC,KAAK,CAAC;IAChD,KAAK,CAAC,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;IAC/B,MAAM,CAAC,EAAE,aAAa,CAAC,QAAQ,CAAC,CAAC;CAClC;AAED,eAAO,MAAM,QAAQ,uHAWpB,CAAC"}
|
|
@@ -1,3 +1,27 @@
|
|
|
1
|
-
export declare const
|
|
1
|
+
export declare const paddingVar: `var(--${string})`;
|
|
2
|
+
export declare const table: import("@vanilla-extract/recipes").RuntimeFn<{
|
|
3
|
+
size: {
|
|
4
|
+
sm: {
|
|
5
|
+
vars: {
|
|
6
|
+
[paddingVar]: "0.25em";
|
|
7
|
+
};
|
|
8
|
+
};
|
|
9
|
+
md: {
|
|
10
|
+
vars: {
|
|
11
|
+
[paddingVar]: "0.5em";
|
|
12
|
+
};
|
|
13
|
+
};
|
|
14
|
+
lg: {
|
|
15
|
+
vars: {
|
|
16
|
+
[paddingVar]: "0.75em";
|
|
17
|
+
};
|
|
18
|
+
};
|
|
19
|
+
xl: {
|
|
20
|
+
vars: {
|
|
21
|
+
[paddingVar]: "1em";
|
|
22
|
+
};
|
|
23
|
+
};
|
|
24
|
+
};
|
|
25
|
+
}>;
|
|
2
26
|
export declare const striped: string;
|
|
3
27
|
//# sourceMappingURL=Table.css.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Table.css.d.ts","sourceRoot":"","sources":["../../../src/components/Table/Table.css.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Table.css.d.ts","sourceRoot":"","sources":["../../../src/components/Table/Table.css.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,UAAU,oBAAc,CAAC;AAEtC,eAAO,MAAM,KAAK;;;;gBAYR,CAAC,UAAU,CAAC,WAAY;;;;;gBAMxB,CAAC,UAAU,CAAC,UAAY;;;;;gBAMxB,CAAC,UAAU,CAAC,WAAY;;;;;gBAMxB,CAAC,UAAU,CAAC,QAAY;;;;EAKhC,CAAC;AAEH,eAAO,MAAM,OAAO,QAAqB,CAAC"}
|
|
@@ -2,8 +2,10 @@ import './../../styles/layers.css.ts.vanilla.css';
|
|
|
2
2
|
import './../../styles/sprinkles.css.ts.vanilla.css';
|
|
3
3
|
import './../../styles/globalStyle.css.ts.vanilla.css';
|
|
4
4
|
import './Table.css.ts.vanilla.css';
|
|
5
|
+
import { c as createRuntimeFn } from '../../node_modules/.pnpm/@vanilla-extract_recipes@0.5.7_@vanilla-extract_css@1.17.4_babel-plugin-macros@3.1.0_/node_modules/@vanilla-extract/recipes/dist/createRuntimeFn-62c9670f.esm.js';
|
|
5
6
|
|
|
6
|
-
var
|
|
7
|
-
var
|
|
7
|
+
var paddingVar = 'var(--paddingVar__cuva6j0)';
|
|
8
|
+
var striped = 'Table_styleWithLayer__cuva6jb';
|
|
9
|
+
var table = createRuntimeFn({defaultClassName:'Table__cuva6j6 Table_layeredBase__cuva6j1',variantClassNames:{size:{sm:'Table_styleWithLayer__cuva6j2',md:'Table_styleWithLayer__cuva6j3',lg:'Table_styleWithLayer__cuva6j4',xl:'Table_styleWithLayer__cuva6j5'}},defaultVariants:{},compoundVariants:[]});
|
|
8
10
|
|
|
9
|
-
export { striped, table };
|
|
11
|
+
export { paddingVar, striped, table };
|
|
@@ -1,8 +1,20 @@
|
|
|
1
1
|
@layer components;
|
|
2
2
|
@layer components {
|
|
3
|
-
.
|
|
3
|
+
.Table_layeredBase__cuva6j1 {
|
|
4
4
|
width: 100%;
|
|
5
5
|
table-layout: fixed;
|
|
6
6
|
border-spacing: 0;
|
|
7
7
|
}
|
|
8
|
+
.Table_styleWithLayer__cuva6j2 {
|
|
9
|
+
--paddingVar__cuva6j0: 0.25em;
|
|
10
|
+
}
|
|
11
|
+
.Table_styleWithLayer__cuva6j3 {
|
|
12
|
+
--paddingVar__cuva6j0: 0.5em;
|
|
13
|
+
}
|
|
14
|
+
.Table_styleWithLayer__cuva6j4 {
|
|
15
|
+
--paddingVar__cuva6j0: 0.75em;
|
|
16
|
+
}
|
|
17
|
+
.Table_styleWithLayer__cuva6j5 {
|
|
18
|
+
--paddingVar__cuva6j0: 1em;
|
|
19
|
+
}
|
|
8
20
|
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import type { UIComponent } from '
|
|
1
|
+
import type { UIComponent } from '#types';
|
|
2
2
|
import * as s from './Table.css';
|
|
3
|
-
interface TableProps extends UIComponent<'table'> {
|
|
3
|
+
interface TableProps extends UIComponent<'table', typeof s.table> {
|
|
4
4
|
isStriped?: boolean;
|
|
5
5
|
}
|
|
6
6
|
export declare const Table: import("react").ForwardRefExoticComponent<Omit<TableProps, "ref"> & import("react").RefAttributes<HTMLTableElement>>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../../src/components/Table/Table.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,
|
|
1
|
+
{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../../src/components/Table/Table.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,QAAQ,CAAC;AAE1C,OAAO,KAAK,CAAC,MAAM,aAAa,CAAC;AAEjC,UAAU,UAAW,SAAQ,WAAW,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC,KAAK,CAAC;IAC/D,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,eAAO,MAAM,KAAK,sHAejB,CAAC;AAGF,OAAO,EAAE,CAAC,IAAI,QAAQ,EAAE,CAAC"}
|
|
@@ -6,8 +6,8 @@ import * as Table_css from './Table.css.js';
|
|
|
6
6
|
export { Table_css as tableCss };
|
|
7
7
|
import { sx } from '../../styles/sx.js';
|
|
8
8
|
|
|
9
|
-
const Table = forwardRef(({ isStriped, className, sx: propSx, ...props }, ref) => {
|
|
10
|
-
return (jsx("table", { ref: ref, className: clsx(table, isStriped && striped, sx(propSx), className), ...props }));
|
|
9
|
+
const Table = forwardRef(({ isStriped, className, size = 'md', sx: propSx, ...props }, ref) => {
|
|
10
|
+
return (jsx("table", { ref: ref, className: clsx(table({ size }), isStriped && striped, sx(propSx), className), ...props }));
|
|
11
11
|
});
|
|
12
12
|
Table.displayName = 'Table';
|
|
13
13
|
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import type { UIComponent } from '
|
|
1
|
+
import type { UIComponent } from '#types';
|
|
2
2
|
type TableBodyProps = UIComponent<'tbody'>;
|
|
3
3
|
export declare const TableBody: ({ className, sx: propSx, ...props }: TableBodyProps) => import("react/jsx-runtime").JSX.Element;
|
|
4
4
|
export {};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TableBody.d.ts","sourceRoot":"","sources":["../../../src/components/Table/TableBody.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,
|
|
1
|
+
{"version":3,"file":"TableBody.d.ts","sourceRoot":"","sources":["../../../src/components/Table/TableBody.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,QAAQ,CAAC;AAE1C,KAAK,cAAc,GAAG,WAAW,CAAC,OAAO,CAAC,CAAC;AAE3C,eAAO,MAAM,SAAS,GAAI,qCAIvB,cAAc,4CAEhB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TableCell.css.d.ts","sourceRoot":"","sources":["../../../src/components/Table/TableCell.css.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,SAAS,
|
|
1
|
+
{"version":3,"file":"TableCell.css.d.ts","sourceRoot":"","sources":["../../../src/components/Table/TableCell.css.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,SAAS,QAuCpB,CAAC"}
|
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
@layer components;
|
|
2
2
|
@layer components {
|
|
3
3
|
.TableCell_styleWithLayer__1a6tmtd0 {
|
|
4
|
-
padding:
|
|
4
|
+
padding-block: var(--paddingVar__cuva6j0);
|
|
5
|
+
padding-inline: calc(var(--paddingVar__cuva6j0) / 2);
|
|
5
6
|
transition: background-color 0.1s ease, color 0.1s ease;
|
|
6
7
|
}
|
|
7
8
|
.TableRow_styleWithLayer__1ntlunj0 > .TableCell_styleWithLayer__1a6tmtd0 {
|
|
@@ -10,20 +11,22 @@
|
|
|
10
11
|
tr > .TableCell_styleWithLayer__1a6tmtd0:first-child {
|
|
11
12
|
border-top-left-radius: var(--borderRadius__n6e2fs0);
|
|
12
13
|
border-bottom-left-radius: var(--borderRadius__n6e2fs0);
|
|
14
|
+
padding-left: var(--paddingVar__cuva6j0);
|
|
13
15
|
}
|
|
14
16
|
tr > .TableCell_styleWithLayer__1a6tmtd0:last-child {
|
|
15
17
|
border-top-right-radius: var(--borderRadius__n6e2fs0);
|
|
16
18
|
border-bottom-right-radius: var(--borderRadius__n6e2fs0);
|
|
19
|
+
padding-right: var(--paddingVar__cuva6j0);
|
|
17
20
|
}
|
|
18
21
|
tbody > tr:hover > .TableCell_styleWithLayer__1a6tmtd0 {
|
|
19
22
|
background-color: rgb(var(--color-accent__n6e2fsd));
|
|
20
23
|
color: rgb(var(--color-accent-foreground__n6e2fse));
|
|
21
24
|
}
|
|
22
|
-
.
|
|
25
|
+
.Table_styleWithLayer__cuva6jb > tbody > tr:nth-of-type(odd) > .TableCell_styleWithLayer__1a6tmtd0 {
|
|
23
26
|
background-color: rgb(var(--color-card__n6e2fsf));
|
|
24
27
|
color: rgb(var(--color-accent-foreground__n6e2fse));
|
|
25
28
|
}
|
|
26
|
-
.
|
|
29
|
+
.Table_styleWithLayer__cuva6jb > tbody > tr:nth-of-type(odd):hover > .TableCell_styleWithLayer__1a6tmtd0 {
|
|
27
30
|
background-color: rgb(var(--color-accent__n6e2fsd));
|
|
28
31
|
}
|
|
29
32
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TableCell.d.ts","sourceRoot":"","sources":["../../../src/components/Table/TableCell.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,aAAa,EAAE,MAAM,OAAO,CAAC;AAK3C,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,
|
|
1
|
+
{"version":3,"file":"TableCell.d.ts","sourceRoot":"","sources":["../../../src/components/Table/TableCell.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,aAAa,EAAE,MAAM,OAAO,CAAC;AAK3C,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,QAAQ,CAAC;AAI1C,UAAU,cAAe,SAAQ,WAAW,CAAC,IAAI,CAAC;IAChD,KAAK,CAAC,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;IAC/B,SAAS,CAAC,EAAE,aAAa,CAAC,WAAW,CAAC,CAAC;CACxC;AAED,eAAO,MAAM,SAAS,GAAI,8DAOvB,cAAc,4CAQhB,CAAC"}
|
|
@@ -4,7 +4,7 @@ import { tableCell } from './TableCell.css.js';
|
|
|
4
4
|
import { sx } from '../../styles/sx.js';
|
|
5
5
|
|
|
6
6
|
const TableCell = ({ width, textAlign, style, className, sx: propSx, ...props }) => {
|
|
7
|
-
return (jsx("td", {
|
|
7
|
+
return (jsx("td", { className: clsx(tableCell, className, sx(propSx)), style: { ...style, width, textAlign }, ...props }));
|
|
8
8
|
};
|
|
9
9
|
|
|
10
10
|
export { TableCell };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TableHead.d.ts","sourceRoot":"","sources":["../../../src/components/Table/TableHead.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,aAAa,EAAE,MAAM,OAAO,CAAC;AAK3C,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,
|
|
1
|
+
{"version":3,"file":"TableHead.d.ts","sourceRoot":"","sources":["../../../src/components/Table/TableHead.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,aAAa,EAAE,MAAM,OAAO,CAAC;AAK3C,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,QAAQ,CAAC;AAI1C,UAAU,cAAe,SAAQ,WAAW,CAAC,IAAI,CAAC;IAChD,KAAK,CAAC,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;IAC/B,SAAS,CAAC,EAAE,aAAa,CAAC,WAAW,CAAC,CAAC;CACxC;AAED,eAAO,MAAM,SAAS,GAAI,8DAOvB,cAAc,4CAQhB,CAAC"}
|
|
@@ -4,7 +4,7 @@ import { tableHead } from './TableHead.css.js';
|
|
|
4
4
|
import { sx } from '../../styles/sx.js';
|
|
5
5
|
|
|
6
6
|
const TableHead = ({ width, textAlign, style, className, sx: propSx, ...props }) => {
|
|
7
|
-
return (jsx("th", {
|
|
7
|
+
return (jsx("th", { className: clsx(tableHead, className, sx(propSx)), style: { ...style, width, textAlign }, ...props }));
|
|
8
8
|
};
|
|
9
9
|
|
|
10
10
|
export { TableHead };
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import type { UIComponent } from '
|
|
1
|
+
import type { UIComponent } from '#types';
|
|
2
2
|
type TableHeaderProps = UIComponent<'thead'>;
|
|
3
3
|
export declare const TableHeader: ({ className, sx: propSx, ...props }: TableHeaderProps) => import("react/jsx-runtime").JSX.Element;
|
|
4
4
|
export {};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TableHeader.d.ts","sourceRoot":"","sources":["../../../src/components/Table/TableHeader.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,
|
|
1
|
+
{"version":3,"file":"TableHeader.d.ts","sourceRoot":"","sources":["../../../src/components/Table/TableHeader.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,QAAQ,CAAC;AAE1C,KAAK,gBAAgB,GAAG,WAAW,CAAC,OAAO,CAAC,CAAC;AAE7C,eAAO,MAAM,WAAW,GAAI,qCAIzB,gBAAgB,4CAElB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TableRow.d.ts","sourceRoot":"","sources":["../../../src/components/Table/TableRow.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,
|
|
1
|
+
{"version":3,"file":"TableRow.d.ts","sourceRoot":"","sources":["../../../src/components/Table/TableRow.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,QAAQ,CAAC;AAI1C,UAAU,aAAc,SAAQ,WAAW,CAAC,IAAI,CAAC;IAC/C,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAED,eAAO,MAAM,QAAQ,GAAI,oDAKtB,aAAa,4CAOf,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/Tabs.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,
|
|
1
|
+
{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/Tabs.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,QAAQ,CAAC;AAI1C,UAAU,SAAU,SAAQ,WAAW,CAAC,KAAK,CAAC;IAC5C,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAChC;AAED,eAAO,MAAM,IAAI,mHAiBhB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TabsContent.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/TabsContent.tsx"],"names":[],"mappings":"AAEA,OAAO,EAA0B,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAK/D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,
|
|
1
|
+
{"version":3,"file":"TabsContent.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/TabsContent.tsx"],"names":[],"mappings":"AAEA,OAAO,EAA0B,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAK/D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,QAAQ,CAAC;AAI1C,UAAU,gBAAiB,SAAQ,WAAW,CAAC,KAAK,CAAC;IACnD,QAAQ,EAAE,SAAS,CAAC;IACpB,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;CACxB;AAED,eAAO,MAAM,WAAW,0HAcvB,CAAC"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import type { UIComponent } from '
|
|
1
|
+
import type { UIComponent } from '#types';
|
|
2
2
|
type TabsListProps = UIComponent<'div'>;
|
|
3
3
|
export declare const TabsList: import("react").ForwardRefExoticComponent<Omit<TabsListProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
|
|
4
4
|
export {};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TabsList.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/TabsList.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,
|
|
1
|
+
{"version":3,"file":"TabsList.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/TabsList.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,QAAQ,CAAC;AAI1C,KAAK,aAAa,GAAG,WAAW,CAAC,KAAK,CAAC,CAAC;AAExC,eAAO,MAAM,QAAQ,uHAYpB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TabsTrigger.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/TabsTrigger.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,
|
|
1
|
+
{"version":3,"file":"TabsTrigger.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/TabsTrigger.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,QAAQ,CAAC;AAK1C,UAAU,gBAAiB,SAAQ,WAAW,CAAC,QAAQ,CAAC;IACtD,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;CACxB;AAED,eAAO,MAAM,WAAW,6HAyBvB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TextField.css.d.ts","sourceRoot":"","sources":["../../../src/components/TextField/TextField.css.ts"],"names":[],"mappings":"AAkCA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
|
1
|
+
{"version":3,"file":"TextField.css.d.ts","sourceRoot":"","sources":["../../../src/components/TextField/TextField.css.ts"],"names":[],"mappings":"AAkCA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAgDpB,CAAC"}
|
|
@@ -91,7 +91,9 @@
|
|
|
91
91
|
--backgroundVar__q8l7gt0: var(--color-stone-500__n6e2fs77);
|
|
92
92
|
}
|
|
93
93
|
.TextField_layeredBase__q8l7gtv {
|
|
94
|
-
|
|
94
|
+
width: 100%;
|
|
95
|
+
height: 2.5em;
|
|
96
|
+
padding: 0 0.75em;
|
|
95
97
|
border: 1px solid;
|
|
96
98
|
border-color: rgb(var(--color-border__n6e2fs3));
|
|
97
99
|
background-color: rgb(var(--color-background__n6e2fs1));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/TextField/index.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/TextField/index.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,QAAQ,CAAC;AAE1C,OAAO,KAAK,CAAC,MAAM,iBAAiB,CAAC;AAErC,UAAU,cAAe,SAAQ,WAAW,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC,SAAS,CAAC;IACvE,IAAI,CAAC,EAAE,KAAK,CAAC,sBAAsB,CAAC;CACrC;AAED,eAAO,MAAM,SAAS,0HAqBrB,CAAC;AAGF,OAAO,EAAE,CAAC,IAAI,YAAY,EAAE,CAAC"}
|
|
@@ -7,7 +7,7 @@ export { TextField_css as textFieldCss };
|
|
|
7
7
|
import { sx } from '../../styles/sx.js';
|
|
8
8
|
|
|
9
9
|
const TextField = forwardRef(({ className, type = 'text', size = 'md', color = 'primary', sx: propSx, ...props }, ref) => {
|
|
10
|
-
return (jsx("input", { ref: ref,
|
|
10
|
+
return (jsx("input", { ref: ref, className: clsx(className, textField({ size, color }), sx(propSx)), type: type, ...props }));
|
|
11
11
|
});
|
|
12
12
|
TextField.displayName = 'TextField';
|
|
13
13
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Toast/index.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Toast/index.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,QAAQ,CAAC;AAE1C,OAAO,KAAK,CAAC,MAAM,aAAa,CAAC;AAEjC,UAAU,UAAW,SAAQ,WAAW,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC,KAAK,CAAC;IAC7D,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,eAAO,MAAM,KAAK,oHA8BjB,CAAC;AAGF,OAAO,EAAE,CAAC,IAAI,QAAQ,EAAE,CAAC"}
|
|
@@ -8,7 +8,7 @@ import { Box } from '../Box/index.js';
|
|
|
8
8
|
import { sx } from '../../styles/sx.js';
|
|
9
9
|
|
|
10
10
|
const Toast = forwardRef(({ children, color = 'accent', className, duration = 0, sx: propSx, ...props }, ref) => {
|
|
11
|
-
return (jsxs(Box, { ref: ref, boxShadow: "accent-sm",
|
|
11
|
+
return (jsxs(Box, { ref: ref, boxShadow: "accent-sm", className: clsx(toast({ color }), className, sx(propSx)), rounded: true, ...props, children: [jsx("div", { className: progress({ animation: duration !== 0 }), style: {
|
|
12
12
|
animationDuration: duration > 0 ? `${duration}ms` : undefined,
|
|
13
13
|
} }), jsx("span", { style: { position: 'relative' }, children: children })] }));
|
|
14
14
|
});
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Tooltip.css.d.ts","sourceRoot":"","sources":["../../../src/components/Tooltip/Tooltip.css.ts"],"names":[],"mappings":"AAgBA,eAAO,MAAM,OAAO;;;;;;;;;;;;EAgClB,CAAC"}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import './../../styles/layers.css.ts.vanilla.css';
|
|
2
|
+
import './../../styles/sprinkles.css.ts.vanilla.css';
|
|
3
|
+
import './../../styles/globalStyle.css.ts.vanilla.css';
|
|
4
|
+
import './Tooltip.css.ts.vanilla.css';
|
|
5
|
+
import { c as createRuntimeFn } from '../../node_modules/.pnpm/@vanilla-extract_recipes@0.5.7_@vanilla-extract_css@1.17.4_babel-plugin-macros@3.1.0_/node_modules/@vanilla-extract/recipes/dist/createRuntimeFn-62c9670f.esm.js';
|
|
6
|
+
|
|
7
|
+
var tooltip = createRuntimeFn({defaultClassName:'Tooltip__1s9n3or5 Tooltip_layeredBase__1s9n3or1',variantClassNames:{size:{sm:'Tooltip_styleWithLayer__1s9n3or2',md:'Tooltip_styleWithLayer__1s9n3or3',lg:'Tooltip_styleWithLayer__1s9n3or4'}},defaultVariants:{},compoundVariants:[]});
|
|
8
|
+
|
|
9
|
+
export { tooltip };
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
@keyframes Tooltip_fadeIn__1s9n3or0 {
|
|
2
|
+
0% {
|
|
3
|
+
opacity: 0;
|
|
4
|
+
}
|
|
5
|
+
100% {
|
|
6
|
+
opacity: 1;
|
|
7
|
+
}
|
|
8
|
+
}
|
|
9
|
+
@layer components;
|
|
10
|
+
@layer components {
|
|
11
|
+
.Tooltip_layeredBase__1s9n3or1 {
|
|
12
|
+
position: fixed;
|
|
13
|
+
z-index: 100;
|
|
14
|
+
top: 50%;
|
|
15
|
+
left: 0;
|
|
16
|
+
padding: 0.5em;
|
|
17
|
+
border-radius: var(--borderRadius__n6e2fs0);
|
|
18
|
+
background-color: rgb(var(--color-foreground__n6e2fs2));
|
|
19
|
+
color: rgb(var(--color-background__n6e2fs1));
|
|
20
|
+
transform: translateX(-50%);
|
|
21
|
+
animation: Tooltip_fadeIn__1s9n3or0 0.15s ease 1;
|
|
22
|
+
pointer-events: none;
|
|
23
|
+
}
|
|
24
|
+
.Tooltip_styleWithLayer__1s9n3or2 {
|
|
25
|
+
font-size: 0.875em;
|
|
26
|
+
}
|
|
27
|
+
.Tooltip_styleWithLayer__1s9n3or3 {
|
|
28
|
+
font-size: 1em;
|
|
29
|
+
}
|
|
30
|
+
.Tooltip_styleWithLayer__1s9n3or4 {
|
|
31
|
+
font-size: 1.125em;
|
|
32
|
+
}
|
|
33
|
+
}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { type PointerEventHandler, type ReactElement, type ReactNode } from 'react';
|
|
2
|
+
import type { UIComponent } from '#types';
|
|
3
|
+
import * as s from './Tooltip.css';
|
|
4
|
+
interface TooltipProps extends Omit<UIComponent<'div', typeof s.tooltip>, 'content'> {
|
|
5
|
+
children: ReactElement<{
|
|
6
|
+
onPointerOver?: PointerEventHandler;
|
|
7
|
+
onPointerOut?: PointerEventHandler;
|
|
8
|
+
}>;
|
|
9
|
+
content: ReactNode;
|
|
10
|
+
}
|
|
11
|
+
export declare const Tooltip: ({ children, content, size }: TooltipProps) => import("react/jsx-runtime").JSX.Element;
|
|
12
|
+
export {};
|
|
13
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Tooltip/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAGL,KAAK,mBAAmB,EACxB,KAAK,YAAY,EACjB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAIf,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,QAAQ,CAAC;AAE1C,OAAO,KAAK,CAAC,MAAM,eAAe,CAAC;AAEnC,UAAU,YACR,SAAQ,IAAI,CAAC,WAAW,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC,OAAO,CAAC,EAAE,SAAS,CAAC;IAC7D,QAAQ,EAAE,YAAY,CAAC;QACrB,aAAa,CAAC,EAAE,mBAAmB,CAAC;QACpC,YAAY,CAAC,EAAE,mBAAmB,CAAC;KACpC,CAAC,CAAC;IACH,OAAO,EAAE,SAAS,CAAC;CACpB;AAED,eAAO,MAAM,OAAO,GAAI,6BAAoC,YAAY,4CAuCvE,CAAC"}
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
|
|
3
|
+
import { useState, cloneElement } from 'react';
|
|
4
|
+
import { createPortal } from 'react-dom';
|
|
5
|
+
import { tooltip } from './Tooltip.css.js';
|
|
6
|
+
import { useContainer } from '../../hooks/useContainer/index.js';
|
|
7
|
+
|
|
8
|
+
const Tooltip = ({ children, content, size = 'sm' }) => {
|
|
9
|
+
const [isVisible, setIsVisible] = useState(false);
|
|
10
|
+
const [position, setPosition] = useState({
|
|
11
|
+
x: 0,
|
|
12
|
+
y: 0,
|
|
13
|
+
});
|
|
14
|
+
const container = useContainer();
|
|
15
|
+
const handlePointerOver = (e) => {
|
|
16
|
+
const rect = e.currentTarget.getBoundingClientRect();
|
|
17
|
+
setIsVisible(true);
|
|
18
|
+
setPosition({ x: rect.x + rect.width / 2, y: rect.y + rect.height + 4 });
|
|
19
|
+
children.props?.onPointerOver?.(e);
|
|
20
|
+
};
|
|
21
|
+
const handlePointerOut = (e) => {
|
|
22
|
+
setIsVisible(false);
|
|
23
|
+
children.props?.onPointerOut?.(e);
|
|
24
|
+
};
|
|
25
|
+
return (jsxs(Fragment, { children: [cloneElement(children, {
|
|
26
|
+
onPointerOver: handlePointerOver,
|
|
27
|
+
onPointerOut: handlePointerOut,
|
|
28
|
+
}), isVisible &&
|
|
29
|
+
createPortal(jsx("div", { className: tooltip({ size }), style: { top: position.y, left: position.x }, children: content }), container)] }));
|
|
30
|
+
};
|
|
31
|
+
|
|
32
|
+
export { Tooltip };
|
|
@@ -6,5 +6,12 @@ export declare const typography: import("@vanilla-extract/recipes").RuntimeFn<{
|
|
|
6
6
|
textOverflow: "ellipsis";
|
|
7
7
|
};
|
|
8
8
|
};
|
|
9
|
+
isGradient: {
|
|
10
|
+
true: {
|
|
11
|
+
background: `linear-gradient(90deg, var(--${string}), var(--${string}))`;
|
|
12
|
+
backgroundClip: "text";
|
|
13
|
+
color: "transparent !important";
|
|
14
|
+
};
|
|
15
|
+
};
|
|
9
16
|
}>;
|
|
10
17
|
//# sourceMappingURL=Typography.css.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Typography.css.d.ts","sourceRoot":"","sources":["../../../src/components/Typography/Typography.css.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Typography.css.d.ts","sourceRoot":"","sources":["../../../src/components/Typography/Typography.css.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;EAsBrB,CAAC"}
|
|
@@ -4,6 +4,6 @@ import './../../styles/globalStyle.css.ts.vanilla.css';
|
|
|
4
4
|
import './Typography.css.ts.vanilla.css';
|
|
5
5
|
import { c as createRuntimeFn } from '../../node_modules/.pnpm/@vanilla-extract_recipes@0.5.7_@vanilla-extract_css@1.17.4_babel-plugin-macros@3.1.0_/node_modules/@vanilla-extract/recipes/dist/createRuntimeFn-62c9670f.esm.js';
|
|
6
6
|
|
|
7
|
-
var typography = createRuntimeFn({defaultClassName:'
|
|
7
|
+
var typography = createRuntimeFn({defaultClassName:'Typography__q3o6cc3 Typography_layeredBase__q3o6cc0',variantClassNames:{isEllipsis:{true:'Typography_styleWithLayer__q3o6cc1'},isGradient:{true:'Typography_styleWithLayer__q3o6cc2'}},defaultVariants:{},compoundVariants:[]});
|
|
8
8
|
|
|
9
9
|
export { typography };
|
|
@@ -8,4 +8,9 @@
|
|
|
8
8
|
white-space: nowrap;
|
|
9
9
|
text-overflow: ellipsis;
|
|
10
10
|
}
|
|
11
|
+
.Typography_styleWithLayer__q3o6cc2 {
|
|
12
|
+
background: linear-gradient(90deg, var(--gradientFrom__1kdsc240), var(--gradientTo__1kdsc241));
|
|
13
|
+
background-clip: text;
|
|
14
|
+
color: transparent !important;
|
|
15
|
+
}
|
|
11
16
|
}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { type SprinklesProps } from '
|
|
2
|
-
import { type UIComponent } from '
|
|
1
|
+
import { type SprinklesProps } from '#styles';
|
|
2
|
+
import { type UIComponent } from '#types';
|
|
3
3
|
import * as s from './Typography.css';
|
|
4
4
|
type TypographyElement = 'p' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'span';
|
|
5
5
|
type TypographyProps<T extends TypographyElement = TypographyElement> = Omit<UIComponent<T, typeof s.typography> & {
|
|
@@ -8,6 +8,11 @@ type TypographyProps<T extends TypographyElement = TypographyElement> = Omit<UIC
|
|
|
8
8
|
fontSize?: SprinklesProps['fontSize'];
|
|
9
9
|
fontWeight?: SprinklesProps['fontWeight'];
|
|
10
10
|
lineHeight?: SprinklesProps['lineHeight'];
|
|
11
|
+
textAlign?: SprinklesProps['textAlign'];
|
|
12
|
+
letterSpacing?: SprinklesProps['letterSpacing'];
|
|
13
|
+
wordBreak?: SprinklesProps['wordBreak'];
|
|
14
|
+
gradientFrom?: SprinklesProps['gradientFrom'];
|
|
15
|
+
gradientTo?: SprinklesProps['gradientTo'];
|
|
11
16
|
}, 'ref'>;
|
|
12
17
|
export declare const Typography: import("react").ForwardRefExoticComponent<TypographyProps<TypographyElement> & import("react").RefAttributes<HTMLParagraphElement>>;
|
|
13
18
|
export { s as typographyCss };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Typography/index.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Typography/index.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,SAAS,CAAC;AACzD,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,QAAQ,CAAC;AAE1C,OAAO,KAAK,CAAC,MAAM,kBAAkB,CAAC;AAEtC,KAAK,iBAAiB,GAAG,GAAG,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAC;AAEhF,KAAK,eAAe,CAAC,CAAC,SAAS,iBAAiB,GAAG,iBAAiB,IAAI,IAAI,CAC1E,WAAW,CAAC,CAAC,EAAE,OAAO,CAAC,CAAC,UAAU,CAAC,GAAG;IACpC,EAAE,CAAC,EAAE,CAAC,CAAC;IACP,KAAK,CAAC,EAAE,cAAc,CAAC,OAAO,CAAC,CAAC;IAChC,QAAQ,CAAC,EAAE,cAAc,CAAC,UAAU,CAAC,CAAC;IACtC,UAAU,CAAC,EAAE,cAAc,CAAC,YAAY,CAAC,CAAC;IAC1C,UAAU,CAAC,EAAE,cAAc,CAAC,YAAY,CAAC,CAAC;IAC1C,SAAS,CAAC,EAAE,cAAc,CAAC,WAAW,CAAC,CAAC;IACxC,aAAa,CAAC,EAAE,cAAc,CAAC,eAAe,CAAC,CAAC;IAChD,SAAS,CAAC,EAAE,cAAc,CAAC,WAAW,CAAC,CAAC;IACxC,YAAY,CAAC,EAAE,cAAc,CAAC,cAAc,CAAC,CAAC;IAC9C,UAAU,CAAC,EAAE,cAAc,CAAC,YAAY,CAAC,CAAC;CAC3C,EACD,KAAK,CACN,CAAC;AAEF,eAAO,MAAM,UAAU,qIA+CtB,CAAC;AAGF,OAAO,EAAE,CAAC,IAAI,aAAa,EAAE,CAAC"}
|