@stackframe/stack 2.4.3 → 2.4.6
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/card-frame.d.mts +1 -1
- package/dist/components/card-frame.d.ts +1 -1
- package/dist/components/user-avatar.js +19 -1
- package/dist/components/user-avatar.js.map +1 -1
- package/dist/components/user-button.js +2 -1
- package/dist/components/user-button.js.map +1 -1
- package/dist/components-core/button.js +1 -1
- package/dist/components-core/button.js.map +1 -1
- package/dist/components-core/dropdown.js +3 -0
- package/dist/components-core/dropdown.js.map +1 -1
- package/dist/components-core/index.d.mts +4 -4
- package/dist/components-core/index.d.ts +4 -4
- package/dist/esm/components/user-avatar.js +9 -1
- package/dist/esm/components/user-avatar.js.map +1 -1
- package/dist/esm/components/user-button.js +2 -1
- package/dist/esm/components/user-button.js.map +1 -1
- package/dist/esm/components-core/button.js +1 -1
- package/dist/esm/components-core/button.js.map +1 -1
- package/dist/esm/components-core/dropdown.js +3 -0
- package/dist/esm/components-core/dropdown.js.map +1 -1
- package/dist/esm/lib/stack-app.js +23 -56
- package/dist/esm/lib/stack-app.js.map +1 -1
- package/dist/lib/stack-app.js +23 -56
- package/dist/lib/stack-app.js.map +1 -1
- package/dist/providers/component-provider.d.mts +6 -6
- package/dist/providers/component-provider.d.ts +6 -6
- package/package.json +3 -3
|
@@ -4,6 +4,6 @@ import React__default from 'react';
|
|
|
4
4
|
declare function CardFrame({ children, fullPage }: {
|
|
5
5
|
children: React__default.ReactNode;
|
|
6
6
|
fullPage?: boolean;
|
|
7
|
-
}): string | number | boolean | Iterable<React__default.ReactNode> | Promise<React__default.AwaitedReactNode> |
|
|
7
|
+
}): string | number | boolean | react_jsx_runtime.JSX.Element | Iterable<React__default.ReactNode> | Promise<React__default.AwaitedReactNode> | null | undefined;
|
|
8
8
|
|
|
9
9
|
export { CardFrame as default };
|
|
@@ -4,6 +4,6 @@ import React__default from 'react';
|
|
|
4
4
|
declare function CardFrame({ children, fullPage }: {
|
|
5
5
|
children: React__default.ReactNode;
|
|
6
6
|
fullPage?: boolean;
|
|
7
|
-
}): string | number | boolean | Iterable<React__default.ReactNode> | Promise<React__default.AwaitedReactNode> |
|
|
7
|
+
}): string | number | boolean | react_jsx_runtime.JSX.Element | Iterable<React__default.ReactNode> | Promise<React__default.AwaitedReactNode> | null | undefined;
|
|
8
8
|
|
|
9
9
|
export { CardFrame as default };
|
|
@@ -1,7 +1,9 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
+
var __create = Object.create;
|
|
2
3
|
var __defProp = Object.defineProperty;
|
|
3
4
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
5
|
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
6
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
5
7
|
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
8
|
var __export = (target, all) => {
|
|
7
9
|
for (var name in all)
|
|
@@ -15,6 +17,14 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
15
17
|
}
|
|
16
18
|
return to;
|
|
17
19
|
};
|
|
20
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
|
22
|
+
// file that has been converted to a CommonJS file using a Babel-
|
|
23
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
24
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
25
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
26
|
+
mod
|
|
27
|
+
));
|
|
18
28
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
19
29
|
|
|
20
30
|
// src/components/user-avatar.tsx
|
|
@@ -25,12 +35,20 @@ __export(user_avatar_exports, {
|
|
|
25
35
|
module.exports = __toCommonJS(user_avatar_exports);
|
|
26
36
|
var import_rx = require("react-icons/rx");
|
|
27
37
|
var import__ = require("..");
|
|
38
|
+
var import_constants = require("../utils/constants");
|
|
39
|
+
var import_styled_components = __toESM(require("styled-components"));
|
|
28
40
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
41
|
+
var StyledIcon = (0, import_styled_components.default)(import_rx.RxPerson)`
|
|
42
|
+
color: ${import_constants.SECONDARY_FONT_COLORS.light};
|
|
43
|
+
html[data-stack-theme='dark'] & {
|
|
44
|
+
color: ${import_constants.SECONDARY_FONT_COLORS.dark};
|
|
45
|
+
}
|
|
46
|
+
`;
|
|
29
47
|
function UserAvatar(props) {
|
|
30
48
|
const user = props.user;
|
|
31
49
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import__.Avatar, { style: { height: props.size, width: props.size }, children: [
|
|
32
50
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.AvatarImage, { src: user?.profileImageUrl || "" }),
|
|
33
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.AvatarFallback, { children: user ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Text, { style: { fontWeight: 500 }, children: (user?.displayName || user?.primaryEmail)?.slice(0, 2).toUpperCase() }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
51
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.AvatarFallback, { children: user ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Text, { style: { fontWeight: 500 }, children: (user?.displayName || user?.primaryEmail)?.slice(0, 2).toUpperCase() }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledIcon, { size: props.size }) })
|
|
34
52
|
] });
|
|
35
53
|
}
|
|
36
54
|
//# sourceMappingURL=user-avatar.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/components/user-avatar.tsx"],"sourcesContent":["import { RxPerson } from \"react-icons/rx\";\nimport { Avatar, AvatarFallback, AvatarImage, Text } from \"..\";\nimport { User } from \"../lib/stack-app\";\n\nexport default function UserAvatar(props: { size?: number, user: User | null }) {\n const user = props.user;\n return (\n <Avatar style={{ height: props.size, width: props.size }}>\n <AvatarImage src={user?.profileImageUrl || ''} />\n <AvatarFallback>\n {user ? \n <Text style={{ fontWeight: 500 }}>\n {(user?.displayName || user?.primaryEmail)?.slice(0, 2).toUpperCase()}\n </Text> :\n <
|
|
1
|
+
{"version":3,"sources":["../../src/components/user-avatar.tsx"],"sourcesContent":["import { RxPerson } from \"react-icons/rx\";\nimport { Avatar, AvatarFallback, AvatarImage, Text } from \"..\";\nimport { User } from \"../lib/stack-app\";\nimport { SECONDARY_FONT_COLORS } from \"../utils/constants\";\nimport styled from \"styled-components\";\n\n\nconst StyledIcon = styled(RxPerson)`\n color: ${SECONDARY_FONT_COLORS.light};\n html[data-stack-theme='dark'] & {\n color: ${SECONDARY_FONT_COLORS.dark};\n }\n`;\n\nexport default function UserAvatar(props: { size?: number, user: User | null }) {\n const user = props.user;\n return (\n <Avatar style={{ height: props.size, width: props.size }}>\n <AvatarImage src={user?.profileImageUrl || ''} />\n <AvatarFallback>\n {user ? \n <Text style={{ fontWeight: 500 }}>\n {(user?.displayName || user?.primaryEmail)?.slice(0, 2).toUpperCase()}\n </Text> :\n <StyledIcon size={props.size} />}\n </AvatarFallback>\n </Avatar>\n );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAAyB;AACzB,eAA0D;AAE1D,uBAAsC;AACtC,+BAAmB;AAaf;AAVJ,IAAM,iBAAa,yBAAAA,SAAO,kBAAQ;AAAA,WACvB,uCAAsB,KAAK;AAAA;AAAA,aAEzB,uCAAsB,IAAI;AAAA;AAAA;AAIxB,SAAR,WAA4B,OAA6C;AAC9E,QAAM,OAAO,MAAM;AACnB,SACE,6CAAC,mBAAO,OAAO,EAAE,QAAQ,MAAM,MAAM,OAAO,MAAM,KAAK,GACrD;AAAA,gDAAC,wBAAY,KAAK,MAAM,mBAAmB,IAAI;AAAA,IAC/C,4CAAC,2BACE,iBACC,4CAAC,iBAAK,OAAO,EAAE,YAAY,IAAI,GAC3B,iBAAM,eAAe,MAAM,eAAe,MAAM,GAAG,CAAC,EAAE,YAAY,GACtE,IACA,4CAAC,cAAW,MAAM,MAAM,MAAM,GAClC;AAAA,KACF;AAEJ;","names":["styled"]}
|
|
@@ -97,7 +97,8 @@ function UserButtonInnerInner(props) {
|
|
|
97
97
|
const textStyles = {
|
|
98
98
|
textOverflow: "ellipsis",
|
|
99
99
|
whiteSpace: "nowrap",
|
|
100
|
-
overflow: "hidden"
|
|
100
|
+
overflow: "hidden",
|
|
101
|
+
margin: 0
|
|
101
102
|
};
|
|
102
103
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import__.DropdownMenu, { children: [
|
|
103
104
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.DropdownMenuTrigger, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", gap: "0.5rem", alignItems: "center" }, children: [
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/components/user-button.tsx"],"sourcesContent":["'use client';\nimport React, { Suspense } from \"react\";\nimport { useUser, Text, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, DropdownMenuLabel, DropdownMenuSeparator, useStackApp, useDesign, Avatar, AvatarImage, AvatarFallback, Button, Skeleton, CurrentUser } from \"..\";\nimport { RxPerson, RxEnter, RxHalf2, RxFilePlus, RxPencil2 } from \"react-icons/rx\";\nimport { runAsynchronously } from \"@stackframe/stack-shared/dist/utils/promises\";\nimport { SECONDARY_FONT_COLORS } from \"../utils/constants\";\nimport UserAvatar from \"./user-avatar\";\nimport { useRouter } from \"next/navigation\";\nimport { typedEntries, typedFromEntries } from \"@stackframe/stack-shared/dist/utils/objects\";\nimport styled from \"styled-components\";\n\nconst icons = typedFromEntries(typedEntries({\n RxPencil2,\n RxPerson,\n RxEnter,\n RxHalf2,\n RxFilePlus\n} as const).map(([key, value]) => {\n const styledComponent = styled(value)`\n color: ${SECONDARY_FONT_COLORS.light};\n\n html[data-stack-theme='dark'] & {\n color: ${SECONDARY_FONT_COLORS.dark};\n }\n `;\n return [\n key,\n React.createElement(styledComponent, { size: 20 })\n ];\n}));\n\nfunction Item(props: { text: string, icon: React.ReactNode, onClick: () => void | Promise<void> }) {\n return (\n <DropdownMenuItem \n onClick={() => runAsynchronously(props.onClick)}\n style={{ display: 'flex', gap: '0.5rem', alignItems: 'center' }}\n >\n {props.icon}\n <Text>{props.text}</Text>\n </DropdownMenuItem>\n );\n}\n\ntype UserButtonProps = {\n showUserInfo?: boolean,\n colorModeToggle?: () => void | Promise<void>,\n extraItems?: {\n text: string,\n icon: React.ReactNode,\n onClick: () => void | Promise<void>,\n }[],\n};\n\nexport default function UserButton(props: UserButtonProps) {\n return (\n <Suspense\n fallback={\n <Skeleton>\n <UserButtonInnerInner {...props} user={null} />\n </Skeleton>\n }\n >\n <UserButtonInner {...props} />\n </Suspense>\n );\n}\n\nfunction UserButtonInner(props: UserButtonProps) {\n const user = useUser();\n return <UserButtonInnerInner {...props} user={user} />;\n}\n\n\nfunction UserButtonInnerInner(props: UserButtonProps & { user: CurrentUser | null }) {\n const user = props.user;\n const app = useStackApp();\n const router = useRouter();\n\n const textStyles = {\n textOverflow: 'ellipsis', \n whiteSpace: 'nowrap', \n overflow: 'hidden'
|
|
1
|
+
{"version":3,"sources":["../../src/components/user-button.tsx"],"sourcesContent":["'use client';\nimport React, { Suspense } from \"react\";\nimport { useUser, Text, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, DropdownMenuLabel, DropdownMenuSeparator, useStackApp, useDesign, Avatar, AvatarImage, AvatarFallback, Button, Skeleton, CurrentUser } from \"..\";\nimport { RxPerson, RxEnter, RxHalf2, RxFilePlus, RxPencil2 } from \"react-icons/rx\";\nimport { runAsynchronously } from \"@stackframe/stack-shared/dist/utils/promises\";\nimport { SECONDARY_FONT_COLORS } from \"../utils/constants\";\nimport UserAvatar from \"./user-avatar\";\nimport { useRouter } from \"next/navigation\";\nimport { typedEntries, typedFromEntries } from \"@stackframe/stack-shared/dist/utils/objects\";\nimport styled from \"styled-components\";\n\nconst icons = typedFromEntries(typedEntries({\n RxPencil2,\n RxPerson,\n RxEnter,\n RxHalf2,\n RxFilePlus\n} as const).map(([key, value]) => {\n const styledComponent = styled(value)`\n color: ${SECONDARY_FONT_COLORS.light};\n\n html[data-stack-theme='dark'] & {\n color: ${SECONDARY_FONT_COLORS.dark};\n }\n `;\n return [\n key,\n React.createElement(styledComponent, { size: 20 })\n ];\n}));\n\nfunction Item(props: { text: string, icon: React.ReactNode, onClick: () => void | Promise<void> }) {\n return (\n <DropdownMenuItem \n onClick={() => runAsynchronously(props.onClick)}\n style={{ display: 'flex', gap: '0.5rem', alignItems: 'center' }}\n >\n {props.icon}\n <Text>{props.text}</Text>\n </DropdownMenuItem>\n );\n}\n\ntype UserButtonProps = {\n showUserInfo?: boolean,\n colorModeToggle?: () => void | Promise<void>,\n extraItems?: {\n text: string,\n icon: React.ReactNode,\n onClick: () => void | Promise<void>,\n }[],\n};\n\nexport default function UserButton(props: UserButtonProps) {\n return (\n <Suspense\n fallback={\n <Skeleton>\n <UserButtonInnerInner {...props} user={null} />\n </Skeleton>\n }\n >\n <UserButtonInner {...props} />\n </Suspense>\n );\n}\n\nfunction UserButtonInner(props: UserButtonProps) {\n const user = useUser();\n return <UserButtonInnerInner {...props} user={user} />;\n}\n\n\nfunction UserButtonInnerInner(props: UserButtonProps & { user: CurrentUser | null }) {\n const user = props.user;\n const app = useStackApp();\n const router = useRouter();\n\n const textStyles = {\n textOverflow: 'ellipsis', \n whiteSpace: 'nowrap', \n overflow: 'hidden',\n margin: 0,\n };\n\n return (\n <DropdownMenu>\n <DropdownMenuTrigger>\n <div style={{ display: 'flex', gap: '0.5rem', alignItems: 'center' }}>\n <UserAvatar user={user} />\n {user && props.showUserInfo && <div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>\n <Text style={textStyles}>{user.displayName}</Text>\n <Text style={{ ...textStyles, fontWeight: 400 }} variant=\"secondary\" size=\"sm\">{user.primaryEmail}</Text>\n </div>}\n </div>\n </DropdownMenuTrigger>\n <DropdownMenuContent style={{ zIndex: 1500 }}>\n <DropdownMenuLabel>\n <div style={{ display: 'flex', gap: '0.5rem', alignItems: 'center' }}>\n <UserAvatar user={user} />\n <div>\n {user && <Text>{user.displayName}</Text>}\n {user && <Text variant=\"secondary\" size=\"sm\" style={{ fontWeight: 400 }}>{user.primaryEmail}</Text>}\n {!user && <Text variant=\"secondary\">Not signed in</Text>}\n </div>\n </div>\n </DropdownMenuLabel>\n <DropdownMenuSeparator />\n {user && <Item \n text=\"Account settings\" \n onClick={() => runAsynchronously(router.push(app.urls.accountSettings))}\n icon={icons.RxPerson}\n />}\n {!user && <Item\n text=\"Sign in\"\n onClick={() => runAsynchronously(router.push(app.urls.signIn))}\n icon={icons.RxPerson}\n />}\n {!user && <Item\n text=\"Sign up\"\n onClick={() => runAsynchronously(router.push(app.urls.signUp))}\n icon={icons.RxPencil2}\n />}\n {user && props.extraItems && props.extraItems.map((item, index) => (\n <Item key={index} {...item} />\n ))}\n {props.colorModeToggle && (\n <Item \n text=\"Toggle theme\" \n onClick={props.colorModeToggle} \n icon={icons.RxHalf2}\n />\n )}\n {user && <Item \n text=\"Sign out\" \n onClick={() => user.signOut()} \n icon={icons.RxEnter}\n />}\n </DropdownMenuContent>\n </DropdownMenu>\n );\n}\n"],"mappings":"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","names":["styled","React","UserAvatar"]}
|
|
@@ -130,7 +130,7 @@ var StyledButton = import_styled_components.default.button`
|
|
|
130
130
|
font-family: ${import_constants.FONT_FAMILY};
|
|
131
131
|
font-size: ${import_constants.FONT_SIZES.md};
|
|
132
132
|
opacity: ${(props) => props.disabled ? 0.5 : 1};
|
|
133
|
-
transition: background-color 0.
|
|
133
|
+
transition: background-color 0.05s;
|
|
134
134
|
cursor: pointer;
|
|
135
135
|
position: relative;
|
|
136
136
|
&:disabled {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/components-core/button.tsx"],"sourcesContent":["'use client';\n\nimport React, { useMemo } from \"react\";\nimport { useDesign } from \"../providers/design-provider\";\nimport Color from 'color';\nimport styled from 'styled-components';\nimport { BORDER_RADIUS, FONT_FAMILY, FONT_SIZES } from \"../utils/constants\";\nimport LoadingIndicator from \"./loading-indicator\";\n\nfunction getColors({\n propsColor, \n colors, \n variant, \n}: {\n propsColor?: string, \n colors: { primaryColor: string, secondaryColor: string, backgroundColor: string },\n variant: 'primary' | 'secondary' | 'warning',\n}): { \n bgColor: string, \n hoverBgColor: string,\n activeBgColor: string,\n textColor: string,\n} {\n let bgColor;\n switch (variant) {\n case 'primary': {\n bgColor = colors.primaryColor;\n break;\n }\n case 'secondary': {\n bgColor = colors.secondaryColor;\n break;\n }\n case 'warning': {\n bgColor = '#ff4500';\n break;\n }\n }\n if (propsColor) {\n bgColor = propsColor;\n }\n\n const c = Color(bgColor);\n const pc = Color(colors.primaryColor);\n\n const changeColor = (value: number) => {\n return c.hsl(c.hue(), c.saturationl(), c.lightness() + value).toString();\n };\n \n const getAlpha = (alpha: number) => {\n return Color(\n pc.isDark() ? 'white' : 'black'\n ).alpha(alpha).toString();\n };\n\n if (c.alpha() === 0) {\n return {\n bgColor: 'transparent',\n hoverBgColor: getAlpha(0.1),\n activeBgColor: getAlpha(0.2),\n textColor: colors.primaryColor,\n };\n } else if (c.isLight()) {\n return {\n bgColor,\n hoverBgColor: changeColor(-10),\n activeBgColor: changeColor(-20),\n textColor: 'black',\n };\n } else {\n return {\n bgColor,\n hoverBgColor: changeColor(10),\n activeBgColor: changeColor(20),\n textColor: 'white',\n };\n }\n}\n\nexport type ButtonProps = {\n variant?: 'primary' | 'secondary' | 'warning',\n color?: string,\n size?: 'sm' | 'md' | 'lg',\n loading?: boolean,\n onClick?: (() => void) | (() => Promise<void>),\n} & Omit<React.HTMLProps<HTMLButtonElement>, 'size' | 'type' | 'onClick'>\n\ntype ButtonColors = {\n bgColor: string, \n hoverBgColor: string,\n activeBgColor: string,\n textColor: string,\n}\n\nconst StyledButton = styled.button<{\n $size: 'sm' | 'md' | 'lg',\n $loading: boolean,\n $colors: {\n dark: ButtonColors,\n light: ButtonColors,\n },\n}>`\n border: 0;\n border-radius: ${BORDER_RADIUS};\n padding: ${props => {\n switch (props.$size) {\n case 'sm': { return '0rem 0.75rem'; }\n case 'md': { return '0rem 1rem'; }\n case 'lg': { return '0rem 2rem'; }\n }\n }};\n height: ${props => {\n switch (props.$size) {\n case 'sm': { return '2rem'; }\n case 'md': { return '2.5rem'; }\n case 'lg': { return '3rem'; }\n }\n }};\n font-family: ${FONT_FAMILY};\n font-size: ${FONT_SIZES.md};\n opacity: ${props => props.disabled ? 0.5 : 1};\n transition: background-color 0.
|
|
1
|
+
{"version":3,"sources":["../../src/components-core/button.tsx"],"sourcesContent":["'use client';\n\nimport React, { useMemo } from \"react\";\nimport { useDesign } from \"../providers/design-provider\";\nimport Color from 'color';\nimport styled from 'styled-components';\nimport { BORDER_RADIUS, FONT_FAMILY, FONT_SIZES } from \"../utils/constants\";\nimport LoadingIndicator from \"./loading-indicator\";\n\nfunction getColors({\n propsColor, \n colors, \n variant, \n}: {\n propsColor?: string, \n colors: { primaryColor: string, secondaryColor: string, backgroundColor: string },\n variant: 'primary' | 'secondary' | 'warning',\n}): { \n bgColor: string, \n hoverBgColor: string,\n activeBgColor: string,\n textColor: string,\n} {\n let bgColor;\n switch (variant) {\n case 'primary': {\n bgColor = colors.primaryColor;\n break;\n }\n case 'secondary': {\n bgColor = colors.secondaryColor;\n break;\n }\n case 'warning': {\n bgColor = '#ff4500';\n break;\n }\n }\n if (propsColor) {\n bgColor = propsColor;\n }\n\n const c = Color(bgColor);\n const pc = Color(colors.primaryColor);\n\n const changeColor = (value: number) => {\n return c.hsl(c.hue(), c.saturationl(), c.lightness() + value).toString();\n };\n \n const getAlpha = (alpha: number) => {\n return Color(\n pc.isDark() ? 'white' : 'black'\n ).alpha(alpha).toString();\n };\n\n if (c.alpha() === 0) {\n return {\n bgColor: 'transparent',\n hoverBgColor: getAlpha(0.1),\n activeBgColor: getAlpha(0.2),\n textColor: colors.primaryColor,\n };\n } else if (c.isLight()) {\n return {\n bgColor,\n hoverBgColor: changeColor(-10),\n activeBgColor: changeColor(-20),\n textColor: 'black',\n };\n } else {\n return {\n bgColor,\n hoverBgColor: changeColor(10),\n activeBgColor: changeColor(20),\n textColor: 'white',\n };\n }\n}\n\nexport type ButtonProps = {\n variant?: 'primary' | 'secondary' | 'warning',\n color?: string,\n size?: 'sm' | 'md' | 'lg',\n loading?: boolean,\n onClick?: (() => void) | (() => Promise<void>),\n} & Omit<React.HTMLProps<HTMLButtonElement>, 'size' | 'type' | 'onClick'>\n\ntype ButtonColors = {\n bgColor: string, \n hoverBgColor: string,\n activeBgColor: string,\n textColor: string,\n}\n\nconst StyledButton = styled.button<{\n $size: 'sm' | 'md' | 'lg',\n $loading: boolean,\n $colors: {\n dark: ButtonColors,\n light: ButtonColors,\n },\n}>`\n border: 0;\n border-radius: ${BORDER_RADIUS};\n padding: ${props => {\n switch (props.$size) {\n case 'sm': { return '0rem 0.75rem'; }\n case 'md': { return '0rem 1rem'; }\n case 'lg': { return '0rem 2rem'; }\n }\n }};\n height: ${props => {\n switch (props.$size) {\n case 'sm': { return '2rem'; }\n case 'md': { return '2.5rem'; }\n case 'lg': { return '3rem'; }\n }\n }};\n font-family: ${FONT_FAMILY};\n font-size: ${FONT_SIZES.md};\n opacity: ${props => props.disabled ? 0.5 : 1};\n transition: background-color 0.05s;\n cursor: pointer;\n position: relative;\n &:disabled {\n cursor: auto;\n opacity: 0.5;\n }\n\n background-color: ${props => props.$colors.light.bgColor};\n color: ${props => props.$colors.light.textColor};\n &:not([disabled]) {\n &:active,&:hover:active {\n background-color: ${props => props.$colors.light.activeBgColor};\n }\n &:hover {\n background-color: ${props => props.$colors.light.hoverBgColor};\n }\n }\n\n html[data-stack-theme='dark'] & {\n background-color: ${props => props.$colors.dark.bgColor};\n color: ${props => props.$colors.dark.textColor};\n &:not([disabled]) {\n &:active,&:hover:active {\n background-color: ${props => props.$colors.dark.activeBgColor};\n }\n &:hover {\n background-color: ${props => props.$colors.dark.hoverBgColor};\n }\n }\n }\n`;\n\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n ({\n variant='primary',\n size='md',\n loading=false,\n ...props\n }, ref) => {\n const { colors } = useDesign();\n\n const { dark, light } = useMemo(() => {\n return {\n dark: getColors({ propsColor: props.color, colors: colors.dark, variant }),\n light: getColors({ propsColor: props.color, colors: colors.light, variant }),\n };\n }, [props.color, colors, variant]);\n\n return (\n <StyledButton\n ref={ref}\n $size={size}\n $loading={loading}\n $colors={{ dark, light }}\n {...props}\n >\n <span style={{ position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%, -50%)', visibility: loading ? 'visible' : 'hidden' }}>\n <LoadingIndicator color={{ light: light.textColor, dark: dark.textColor }}/>\n </span>\n <span style={{ visibility: loading ? 'hidden' : 'visible', whiteSpace: 'nowrap' }}>\n {props.children}\n </span>\n </StyledButton>\n );\n }\n);\n\nButton.displayName = 'Button';\n\nexport {\n Button,\n};\n"],"mappings":"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","names":["Color","styled","React","LoadingIndicator"]}
|
|
@@ -53,6 +53,9 @@ var StyledTrigger = (0, import_styled_components.default)(DropdownMenuPrimitive.
|
|
|
53
53
|
outline: none;
|
|
54
54
|
box-shadow: 0;
|
|
55
55
|
}
|
|
56
|
+
&:hover {
|
|
57
|
+
cursor: pointer;
|
|
58
|
+
}
|
|
56
59
|
`;
|
|
57
60
|
var DropdownMenuTrigger = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledTrigger, { ref, ...props }));
|
|
58
61
|
var StyledContent = (0, import_styled_components.default)(DropdownMenuPrimitive.Content)`
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/components-core/dropdown.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport styled from 'styled-components';\nimport * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';\nimport { useDesign } from '..';\nimport { SELECTED_BACKGROUND_COLORS } from '../utils/constants';\nimport { ColorPalette } from '../providers/design-provider';\n\nconst DropdownMenu = DropdownMenuPrimitive.Root;\n\nconst StyledTrigger = styled(DropdownMenuPrimitive.Trigger)`\n all: unset;\n &:focus {\n outline: none;\n box-shadow: 0;\n }\n`;\n\nconst DropdownMenuTrigger = React.forwardRef<\n React.ElementRef<typeof DropdownMenuPrimitive.Trigger>,\n React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Trigger>\n>(({ className, ...props }, ref) => (\n <StyledTrigger ref={ref} {...props} />\n));\n\nconst StyledContent = styled(DropdownMenuPrimitive.Content)<{\n $colors: ColorPalette,\n}>`\n z-index: 50;\n min-width: 8rem;\n overflow: hidden;\n border-radius: 4px;\n padding: 0.25rem;\n box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n\n border: 1px solid ${({ $colors }) => $colors.light.neutralColor};\n background: ${({ $colors }) => $colors.light.backgroundColor};\n\n html[data-stack-theme='dark'] & {\n border-color: ${({ $colors }) => $colors.dark.neutralColor};\n background: ${({ $colors }) => $colors.dark.backgroundColor};\n }\n`;\n\nconst DropdownMenuContent = React.forwardRef<\n React.ElementRef<typeof DropdownMenuPrimitive.Content>,\n React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>\n>(({ className, sideOffset = 4, ...props }, ref) => {\n const { colors } = useDesign();\n return (\n <DropdownMenuPrimitive.Portal>\n <StyledContent \n $colors={colors}\n sideOffset={sideOffset} \n ref={ref} \n {...props} \n />\n </DropdownMenuPrimitive.Portal>\n );\n});\nDropdownMenuContent.displayName = 'DropdownMenuContent';\n\nconst StyledItem = styled(DropdownMenuPrimitive.Item)<{ \n $inset?: boolean,\n}>`\n display: flex;\n cursor: default;\n align-items: center;\n border-radius: 4px;\n padding: 0.375rem 0.5rem;\n font-size: 0.875rem;\n outline: none;\n transition: color 0.2s ease;\n &:focus {\n background-color: var(--accent);\n color: var(--accent-foreground);\n }\n ${({ $inset }) => $inset && 'padding-left: 2rem;'}\n\n &:hover {\n background-color: ${SELECTED_BACKGROUND_COLORS.light};\n }\n\n html[data-stack-theme='dark'] & {\n &:hover {\n background-color: ${SELECTED_BACKGROUND_COLORS.dark};\n }\n }\n`;\n\nconst DropdownMenuItem = React.forwardRef<\n React.ElementRef<typeof DropdownMenuPrimitive.Item>,\n React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {\n inset?: boolean,\n }\n>(({ className, inset, ...props }, ref) => {\n return <StyledItem ref={ref} {...props} $inset={inset} />;\n});\nDropdownMenuItem.displayName = 'DropdownMenuItem';\n\nconst StyledLabel = styled(DropdownMenuPrimitive.Label)<{ inset?: boolean }>`\n padding: 0.375rem 0.5rem;\n font-size: 0.875rem;\n ${({ inset }) => inset && 'padding-left: 2rem;'}\n`;\n\nconst DropdownMenuLabel = React.forwardRef<\n React.ElementRef<typeof DropdownMenuPrimitive.Label>,\n React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {\n inset?: boolean,\n }\n>(({ className, inset, ...props }, ref) => (\n <StyledLabel ref={ref} {...props} inset={inset} />\n));\nDropdownMenuLabel.displayName = 'DropdownMenuLabel';\n\nconst StyledSeparator = styled(DropdownMenuPrimitive.Separator)<{\n $colors: ColorPalette,\n}>`\n margin: 0.25rem -0.25rem;\n height: 1px;\n background-color: ${({ $colors }) => $colors.light.neutralColor};\n\n html[data-stack-theme='dark'] & {\n background-color: ${({ $colors }) => $colors.dark.neutralColor};\n }\n`;\n\nconst DropdownMenuSeparator = React.forwardRef<\n React.ElementRef<typeof DropdownMenuPrimitive.Separator>,\n React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>\n>(({ className, ...props }, ref) => {\n const { colors } = useDesign();\n return <StyledSeparator ref={ref} {...props} $colors={colors} />;\n});\nDropdownMenuSeparator.displayName = 'DropdownMenuSeparator';\n\nexport {\n DropdownMenu,\n DropdownMenuTrigger,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,YAAuB;AACvB,+BAAmB;AACnB,4BAAuC;AACvC,eAA0B;AAC1B,uBAA2C;
|
|
1
|
+
{"version":3,"sources":["../../src/components-core/dropdown.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport styled from 'styled-components';\nimport * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';\nimport { useDesign } from '..';\nimport { SELECTED_BACKGROUND_COLORS } from '../utils/constants';\nimport { ColorPalette } from '../providers/design-provider';\n\nconst DropdownMenu = DropdownMenuPrimitive.Root;\n\nconst StyledTrigger = styled(DropdownMenuPrimitive.Trigger)`\n all: unset;\n &:focus {\n outline: none;\n box-shadow: 0;\n }\n &:hover {\n cursor: pointer;\n }\n`;\n\nconst DropdownMenuTrigger = React.forwardRef<\n React.ElementRef<typeof DropdownMenuPrimitive.Trigger>,\n React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Trigger>\n>(({ className, ...props }, ref) => (\n <StyledTrigger ref={ref} {...props} />\n));\n\nconst StyledContent = styled(DropdownMenuPrimitive.Content)<{\n $colors: ColorPalette,\n}>`\n z-index: 50;\n min-width: 8rem;\n overflow: hidden;\n border-radius: 4px;\n padding: 0.25rem;\n box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n\n border: 1px solid ${({ $colors }) => $colors.light.neutralColor};\n background: ${({ $colors }) => $colors.light.backgroundColor};\n\n html[data-stack-theme='dark'] & {\n border-color: ${({ $colors }) => $colors.dark.neutralColor};\n background: ${({ $colors }) => $colors.dark.backgroundColor};\n }\n`;\n\nconst DropdownMenuContent = React.forwardRef<\n React.ElementRef<typeof DropdownMenuPrimitive.Content>,\n React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>\n>(({ className, sideOffset = 4, ...props }, ref) => {\n const { colors } = useDesign();\n return (\n <DropdownMenuPrimitive.Portal>\n <StyledContent \n $colors={colors}\n sideOffset={sideOffset} \n ref={ref} \n {...props} \n />\n </DropdownMenuPrimitive.Portal>\n );\n});\nDropdownMenuContent.displayName = 'DropdownMenuContent';\n\nconst StyledItem = styled(DropdownMenuPrimitive.Item)<{ \n $inset?: boolean,\n}>`\n display: flex;\n cursor: default;\n align-items: center;\n border-radius: 4px;\n padding: 0.375rem 0.5rem;\n font-size: 0.875rem;\n outline: none;\n transition: color 0.2s ease;\n &:focus {\n background-color: var(--accent);\n color: var(--accent-foreground);\n }\n ${({ $inset }) => $inset && 'padding-left: 2rem;'}\n\n &:hover {\n background-color: ${SELECTED_BACKGROUND_COLORS.light};\n }\n\n html[data-stack-theme='dark'] & {\n &:hover {\n background-color: ${SELECTED_BACKGROUND_COLORS.dark};\n }\n }\n`;\n\nconst DropdownMenuItem = React.forwardRef<\n React.ElementRef<typeof DropdownMenuPrimitive.Item>,\n React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {\n inset?: boolean,\n }\n>(({ className, inset, ...props }, ref) => {\n return <StyledItem ref={ref} {...props} $inset={inset} />;\n});\nDropdownMenuItem.displayName = 'DropdownMenuItem';\n\nconst StyledLabel = styled(DropdownMenuPrimitive.Label)<{ inset?: boolean }>`\n padding: 0.375rem 0.5rem;\n font-size: 0.875rem;\n ${({ inset }) => inset && 'padding-left: 2rem;'}\n`;\n\nconst DropdownMenuLabel = React.forwardRef<\n React.ElementRef<typeof DropdownMenuPrimitive.Label>,\n React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {\n inset?: boolean,\n }\n>(({ className, inset, ...props }, ref) => (\n <StyledLabel ref={ref} {...props} inset={inset} />\n));\nDropdownMenuLabel.displayName = 'DropdownMenuLabel';\n\nconst StyledSeparator = styled(DropdownMenuPrimitive.Separator)<{\n $colors: ColorPalette,\n}>`\n margin: 0.25rem -0.25rem;\n height: 1px;\n background-color: ${({ $colors }) => $colors.light.neutralColor};\n\n html[data-stack-theme='dark'] & {\n background-color: ${({ $colors }) => $colors.dark.neutralColor};\n }\n`;\n\nconst DropdownMenuSeparator = React.forwardRef<\n React.ElementRef<typeof DropdownMenuPrimitive.Separator>,\n React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>\n>(({ className, ...props }, ref) => {\n const { colors } = useDesign();\n return <StyledSeparator ref={ref} {...props} $colors={colors} />;\n});\nDropdownMenuSeparator.displayName = 'DropdownMenuSeparator';\n\nexport {\n DropdownMenu,\n DropdownMenuTrigger,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,YAAuB;AACvB,+BAAmB;AACnB,4BAAuC;AACvC,eAA0B;AAC1B,uBAA2C;AAoBzC;AAjBF,IAAM,eAAqC;AAE3C,IAAM,oBAAgB,yBAAAA,SAA6B,6BAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAW1D,IAAM,sBAA4B,iBAGhC,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QAC1B,4CAAC,iBAAc,KAAW,GAAG,OAAO,CACrC;AAED,IAAM,oBAAgB,yBAAAA,SAA6B,6BAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAUpC,CAAC,EAAE,QAAQ,MAAM,QAAQ,MAAM,YAAY;AAAA,gBACjD,CAAC,EAAE,QAAQ,MAAM,QAAQ,MAAM,eAAe;AAAA;AAAA;AAAA,oBAG1C,CAAC,EAAE,QAAQ,MAAM,QAAQ,KAAK,YAAY;AAAA,kBAC5C,CAAC,EAAE,QAAQ,MAAM,QAAQ,KAAK,eAAe;AAAA;AAAA;AAI/D,IAAM,sBAA4B,iBAGhC,CAAC,EAAE,WAAW,aAAa,GAAG,GAAG,MAAM,GAAG,QAAQ;AAClD,QAAM,EAAE,OAAO,QAAI,oBAAU;AAC7B,SACE,4CAAuB,8BAAtB,EACC;AAAA,IAAC;AAAA;AAAA,MACC,SAAS;AAAA,MACT;AAAA,MACA;AAAA,MACC,GAAG;AAAA;AAAA,EACN,GACF;AAEJ,CAAC;AACD,oBAAoB,cAAc;AAElC,IAAM,iBAAa,yBAAAA,SAA6B,0BAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAehD,CAAC,EAAE,OAAO,MAAM,UAAU,qBAAqB;AAAA;AAAA;AAAA,wBAG3B,4CAA2B,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA,0BAK9B,4CAA2B,IAAI;AAAA;AAAA;AAAA;AAKzD,IAAM,mBAAyB,iBAK7B,CAAC,EAAE,WAAW,OAAO,GAAG,MAAM,GAAG,QAAQ;AACzC,SAAO,4CAAC,cAAW,KAAW,GAAG,OAAO,QAAQ,OAAO;AACzD,CAAC;AACD,iBAAiB,cAAc;AAE/B,IAAM,kBAAc,yBAAAA,SAA6B,2BAAK;AAAA;AAAA;AAAA,IAGlD,CAAC,EAAE,MAAM,MAAM,SAAS,qBAAqB;AAAA;AAGjD,IAAM,oBAA0B,iBAK9B,CAAC,EAAE,WAAW,OAAO,GAAG,MAAM,GAAG,QACjC,4CAAC,eAAY,KAAW,GAAG,OAAO,OAAc,CACjD;AACD,kBAAkB,cAAc;AAEhC,IAAM,sBAAkB,yBAAAA,SAA6B,+BAAS;AAAA;AAAA;AAAA,sBAKxC,CAAC,EAAE,QAAQ,MAAM,QAAQ,MAAM,YAAY;AAAA;AAAA;AAAA,wBAGzC,CAAC,EAAE,QAAQ,MAAM,QAAQ,KAAK,YAAY;AAAA;AAAA;AAIlE,IAAM,wBAA8B,iBAGlC,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QAAQ;AAClC,QAAM,EAAE,OAAO,QAAI,oBAAU;AAC7B,SAAO,4CAAC,mBAAgB,KAAW,GAAG,OAAO,SAAS,QAAQ;AAChE,CAAC;AACD,sBAAsB,cAAc;","names":["styled"]}
|
|
@@ -12,18 +12,18 @@ import React__default from 'react';
|
|
|
12
12
|
declare const Button: React__default.ForwardRefExoticComponent<Omit<Omit<ButtonProps, "ref"> & React__default.RefAttributes<HTMLButtonElement>, "ref"> & React__default.RefAttributes<HTMLButtonElement>>;
|
|
13
13
|
declare const Input: React__default.ForwardRefExoticComponent<Omit<Omit<React__default.InputHTMLAttributes<HTMLInputElement> & Pick<React__default.HTMLProps<HTMLInputElement>, "ref">, "ref"> & React__default.RefAttributes<HTMLInputElement>, "ref"> & React__default.RefAttributes<HTMLInputElement>>;
|
|
14
14
|
declare const Container: React__default.ForwardRefExoticComponent<Omit<{
|
|
15
|
-
size?: number | "
|
|
15
|
+
size?: number | "sm" | "md" | "lg" | "xs" | "xl" | undefined;
|
|
16
16
|
} & Omit<React__default.HTMLProps<HTMLDivElement>, "size">, "ref"> & React__default.RefAttributes<HTMLDivElement>>;
|
|
17
17
|
declare const Separator: React__default.ForwardRefExoticComponent<Omit<Omit<_radix_ui_react_separator.SeparatorProps & React__default.RefAttributes<HTMLDivElement>, "ref"> & React__default.RefAttributes<HTMLDivElement>, "ref"> & React__default.RefAttributes<HTMLDivElement>>;
|
|
18
18
|
declare const Label: React__default.ForwardRefExoticComponent<Omit<Omit<_radix_ui_react_label.LabelProps & React__default.RefAttributes<HTMLLabelElement>, "ref"> & React__default.RefAttributes<HTMLLabelElement>, "ref"> & React__default.RefAttributes<HTMLLabelElement>>;
|
|
19
19
|
declare const Link: React__default.ForwardRefExoticComponent<Omit<Omit<{
|
|
20
|
-
size?: "
|
|
20
|
+
size?: "sm" | "md" | "lg" | "xs" | "xl" | undefined;
|
|
21
21
|
href: string | url.Url;
|
|
22
22
|
} & Omit<React__default.HTMLProps<HTMLLinkElement>, "size" | "href">, "ref"> & React__default.RefAttributes<HTMLAnchorElement>, "ref"> & React__default.RefAttributes<HTMLAnchorElement>>;
|
|
23
23
|
declare const Text: React__default.ForwardRefExoticComponent<Omit<Omit<{
|
|
24
24
|
variant?: "primary" | "secondary" | "warning" | "success" | undefined;
|
|
25
|
-
as?: "
|
|
26
|
-
size?: "
|
|
25
|
+
as?: "h2" | "h3" | "p" | "h1" | "h4" | "h5" | "h6" | undefined;
|
|
26
|
+
size?: "sm" | "md" | "lg" | "xs" | "xl" | undefined;
|
|
27
27
|
} & Omit<React__default.HTMLProps<HTMLParagraphElement>, "size">, "ref"> & React__default.RefAttributes<HTMLParagraphElement>, "ref"> & React__default.RefAttributes<HTMLParagraphElement>>;
|
|
28
28
|
declare const Popover: React__default.ForwardRefExoticComponent<_radix_ui_react_popover.PopoverProps & React__default.RefAttributes<never>>;
|
|
29
29
|
declare const PopoverTrigger: React__default.ForwardRefExoticComponent<Omit<_radix_ui_react_popover.PopoverTriggerProps & React__default.RefAttributes<HTMLButtonElement>, "ref"> & React__default.RefAttributes<HTMLButtonElement>>;
|
|
@@ -12,18 +12,18 @@ import React__default from 'react';
|
|
|
12
12
|
declare const Button: React__default.ForwardRefExoticComponent<Omit<Omit<ButtonProps, "ref"> & React__default.RefAttributes<HTMLButtonElement>, "ref"> & React__default.RefAttributes<HTMLButtonElement>>;
|
|
13
13
|
declare const Input: React__default.ForwardRefExoticComponent<Omit<Omit<React__default.InputHTMLAttributes<HTMLInputElement> & Pick<React__default.HTMLProps<HTMLInputElement>, "ref">, "ref"> & React__default.RefAttributes<HTMLInputElement>, "ref"> & React__default.RefAttributes<HTMLInputElement>>;
|
|
14
14
|
declare const Container: React__default.ForwardRefExoticComponent<Omit<{
|
|
15
|
-
size?: number | "
|
|
15
|
+
size?: number | "sm" | "md" | "lg" | "xs" | "xl" | undefined;
|
|
16
16
|
} & Omit<React__default.HTMLProps<HTMLDivElement>, "size">, "ref"> & React__default.RefAttributes<HTMLDivElement>>;
|
|
17
17
|
declare const Separator: React__default.ForwardRefExoticComponent<Omit<Omit<_radix_ui_react_separator.SeparatorProps & React__default.RefAttributes<HTMLDivElement>, "ref"> & React__default.RefAttributes<HTMLDivElement>, "ref"> & React__default.RefAttributes<HTMLDivElement>>;
|
|
18
18
|
declare const Label: React__default.ForwardRefExoticComponent<Omit<Omit<_radix_ui_react_label.LabelProps & React__default.RefAttributes<HTMLLabelElement>, "ref"> & React__default.RefAttributes<HTMLLabelElement>, "ref"> & React__default.RefAttributes<HTMLLabelElement>>;
|
|
19
19
|
declare const Link: React__default.ForwardRefExoticComponent<Omit<Omit<{
|
|
20
|
-
size?: "
|
|
20
|
+
size?: "sm" | "md" | "lg" | "xs" | "xl" | undefined;
|
|
21
21
|
href: string | url.Url;
|
|
22
22
|
} & Omit<React__default.HTMLProps<HTMLLinkElement>, "size" | "href">, "ref"> & React__default.RefAttributes<HTMLAnchorElement>, "ref"> & React__default.RefAttributes<HTMLAnchorElement>>;
|
|
23
23
|
declare const Text: React__default.ForwardRefExoticComponent<Omit<Omit<{
|
|
24
24
|
variant?: "primary" | "secondary" | "warning" | "success" | undefined;
|
|
25
|
-
as?: "
|
|
26
|
-
size?: "
|
|
25
|
+
as?: "h2" | "h3" | "p" | "h1" | "h4" | "h5" | "h6" | undefined;
|
|
26
|
+
size?: "sm" | "md" | "lg" | "xs" | "xl" | undefined;
|
|
27
27
|
} & Omit<React__default.HTMLProps<HTMLParagraphElement>, "size">, "ref"> & React__default.RefAttributes<HTMLParagraphElement>, "ref"> & React__default.RefAttributes<HTMLParagraphElement>>;
|
|
28
28
|
declare const Popover: React__default.ForwardRefExoticComponent<_radix_ui_react_popover.PopoverProps & React__default.RefAttributes<never>>;
|
|
29
29
|
declare const PopoverTrigger: React__default.ForwardRefExoticComponent<Omit<_radix_ui_react_popover.PopoverTriggerProps & React__default.RefAttributes<HTMLButtonElement>, "ref"> & React__default.RefAttributes<HTMLButtonElement>>;
|
|
@@ -1,12 +1,20 @@
|
|
|
1
1
|
// src/components/user-avatar.tsx
|
|
2
2
|
import { RxPerson } from "react-icons/rx";
|
|
3
3
|
import { Avatar, AvatarFallback, AvatarImage, Text } from "..";
|
|
4
|
+
import { SECONDARY_FONT_COLORS } from "../utils/constants";
|
|
5
|
+
import styled from "styled-components";
|
|
4
6
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
7
|
+
var StyledIcon = styled(RxPerson)`
|
|
8
|
+
color: ${SECONDARY_FONT_COLORS.light};
|
|
9
|
+
html[data-stack-theme='dark'] & {
|
|
10
|
+
color: ${SECONDARY_FONT_COLORS.dark};
|
|
11
|
+
}
|
|
12
|
+
`;
|
|
5
13
|
function UserAvatar(props) {
|
|
6
14
|
const user = props.user;
|
|
7
15
|
return /* @__PURE__ */ jsxs(Avatar, { style: { height: props.size, width: props.size }, children: [
|
|
8
16
|
/* @__PURE__ */ jsx(AvatarImage, { src: user?.profileImageUrl || "" }),
|
|
9
|
-
/* @__PURE__ */ jsx(AvatarFallback, { children: user ? /* @__PURE__ */ jsx(Text, { style: { fontWeight: 500 }, children: (user?.displayName || user?.primaryEmail)?.slice(0, 2).toUpperCase() }) : /* @__PURE__ */ jsx(
|
|
17
|
+
/* @__PURE__ */ jsx(AvatarFallback, { children: user ? /* @__PURE__ */ jsx(Text, { style: { fontWeight: 500 }, children: (user?.displayName || user?.primaryEmail)?.slice(0, 2).toUpperCase() }) : /* @__PURE__ */ jsx(StyledIcon, { size: props.size }) })
|
|
10
18
|
] });
|
|
11
19
|
}
|
|
12
20
|
export {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/user-avatar.tsx"],"sourcesContent":["import { RxPerson } from \"react-icons/rx\";\nimport { Avatar, AvatarFallback, AvatarImage, Text } from \"..\";\nimport { User } from \"../lib/stack-app\";\n\nexport default function UserAvatar(props: { size?: number, user: User | null }) {\n const user = props.user;\n return (\n <Avatar style={{ height: props.size, width: props.size }}>\n <AvatarImage src={user?.profileImageUrl || ''} />\n <AvatarFallback>\n {user ? \n <Text style={{ fontWeight: 500 }}>\n {(user?.displayName || user?.primaryEmail)?.slice(0, 2).toUpperCase()}\n </Text> :\n <
|
|
1
|
+
{"version":3,"sources":["../../../src/components/user-avatar.tsx"],"sourcesContent":["import { RxPerson } from \"react-icons/rx\";\nimport { Avatar, AvatarFallback, AvatarImage, Text } from \"..\";\nimport { User } from \"../lib/stack-app\";\nimport { SECONDARY_FONT_COLORS } from \"../utils/constants\";\nimport styled from \"styled-components\";\n\n\nconst StyledIcon = styled(RxPerson)`\n color: ${SECONDARY_FONT_COLORS.light};\n html[data-stack-theme='dark'] & {\n color: ${SECONDARY_FONT_COLORS.dark};\n }\n`;\n\nexport default function UserAvatar(props: { size?: number, user: User | null }) {\n const user = props.user;\n return (\n <Avatar style={{ height: props.size, width: props.size }}>\n <AvatarImage src={user?.profileImageUrl || ''} />\n <AvatarFallback>\n {user ? \n <Text style={{ fontWeight: 500 }}>\n {(user?.displayName || user?.primaryEmail)?.slice(0, 2).toUpperCase()}\n </Text> :\n <StyledIcon size={props.size} />}\n </AvatarFallback>\n </Avatar>\n );\n}\n"],"mappings":";AAAA,SAAS,gBAAgB;AACzB,SAAS,QAAQ,gBAAgB,aAAa,YAAY;AAE1D,SAAS,6BAA6B;AACtC,OAAO,YAAY;AAaf,SACE,KADF;AAVJ,IAAM,aAAa,OAAO,QAAQ;AAAA,WACvB,sBAAsB,KAAK;AAAA;AAAA,aAEzB,sBAAsB,IAAI;AAAA;AAAA;AAIxB,SAAR,WAA4B,OAA6C;AAC9E,QAAM,OAAO,MAAM;AACnB,SACE,qBAAC,UAAO,OAAO,EAAE,QAAQ,MAAM,MAAM,OAAO,MAAM,KAAK,GACrD;AAAA,wBAAC,eAAY,KAAK,MAAM,mBAAmB,IAAI;AAAA,IAC/C,oBAAC,kBACE,iBACC,oBAAC,QAAK,OAAO,EAAE,YAAY,IAAI,GAC3B,iBAAM,eAAe,MAAM,eAAe,MAAM,GAAG,CAAC,EAAE,YAAY,GACtE,IACA,oBAAC,cAAW,MAAM,MAAM,MAAM,GAClC;AAAA,KACF;AAEJ;","names":[]}
|
|
@@ -64,7 +64,8 @@ function UserButtonInnerInner(props) {
|
|
|
64
64
|
const textStyles = {
|
|
65
65
|
textOverflow: "ellipsis",
|
|
66
66
|
whiteSpace: "nowrap",
|
|
67
|
-
overflow: "hidden"
|
|
67
|
+
overflow: "hidden",
|
|
68
|
+
margin: 0
|
|
68
69
|
};
|
|
69
70
|
return /* @__PURE__ */ jsxs(DropdownMenu, { children: [
|
|
70
71
|
/* @__PURE__ */ jsx(DropdownMenuTrigger, { children: /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: "0.5rem", alignItems: "center" }, children: [
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/user-button.tsx"],"sourcesContent":["'use client';\nimport React, { Suspense } from \"react\";\nimport { useUser, Text, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, DropdownMenuLabel, DropdownMenuSeparator, useStackApp, useDesign, Avatar, AvatarImage, AvatarFallback, Button, Skeleton, CurrentUser } from \"..\";\nimport { RxPerson, RxEnter, RxHalf2, RxFilePlus, RxPencil2 } from \"react-icons/rx\";\nimport { runAsynchronously } from \"@stackframe/stack-shared/dist/utils/promises\";\nimport { SECONDARY_FONT_COLORS } from \"../utils/constants\";\nimport UserAvatar from \"./user-avatar\";\nimport { useRouter } from \"next/navigation\";\nimport { typedEntries, typedFromEntries } from \"@stackframe/stack-shared/dist/utils/objects\";\nimport styled from \"styled-components\";\n\nconst icons = typedFromEntries(typedEntries({\n RxPencil2,\n RxPerson,\n RxEnter,\n RxHalf2,\n RxFilePlus\n} as const).map(([key, value]) => {\n const styledComponent = styled(value)`\n color: ${SECONDARY_FONT_COLORS.light};\n\n html[data-stack-theme='dark'] & {\n color: ${SECONDARY_FONT_COLORS.dark};\n }\n `;\n return [\n key,\n React.createElement(styledComponent, { size: 20 })\n ];\n}));\n\nfunction Item(props: { text: string, icon: React.ReactNode, onClick: () => void | Promise<void> }) {\n return (\n <DropdownMenuItem \n onClick={() => runAsynchronously(props.onClick)}\n style={{ display: 'flex', gap: '0.5rem', alignItems: 'center' }}\n >\n {props.icon}\n <Text>{props.text}</Text>\n </DropdownMenuItem>\n );\n}\n\ntype UserButtonProps = {\n showUserInfo?: boolean,\n colorModeToggle?: () => void | Promise<void>,\n extraItems?: {\n text: string,\n icon: React.ReactNode,\n onClick: () => void | Promise<void>,\n }[],\n};\n\nexport default function UserButton(props: UserButtonProps) {\n return (\n <Suspense\n fallback={\n <Skeleton>\n <UserButtonInnerInner {...props} user={null} />\n </Skeleton>\n }\n >\n <UserButtonInner {...props} />\n </Suspense>\n );\n}\n\nfunction UserButtonInner(props: UserButtonProps) {\n const user = useUser();\n return <UserButtonInnerInner {...props} user={user} />;\n}\n\n\nfunction UserButtonInnerInner(props: UserButtonProps & { user: CurrentUser | null }) {\n const user = props.user;\n const app = useStackApp();\n const router = useRouter();\n\n const textStyles = {\n textOverflow: 'ellipsis', \n whiteSpace: 'nowrap', \n overflow: 'hidden'
|
|
1
|
+
{"version":3,"sources":["../../../src/components/user-button.tsx"],"sourcesContent":["'use client';\nimport React, { Suspense } from \"react\";\nimport { useUser, Text, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, DropdownMenuLabel, DropdownMenuSeparator, useStackApp, useDesign, Avatar, AvatarImage, AvatarFallback, Button, Skeleton, CurrentUser } from \"..\";\nimport { RxPerson, RxEnter, RxHalf2, RxFilePlus, RxPencil2 } from \"react-icons/rx\";\nimport { runAsynchronously } from \"@stackframe/stack-shared/dist/utils/promises\";\nimport { SECONDARY_FONT_COLORS } from \"../utils/constants\";\nimport UserAvatar from \"./user-avatar\";\nimport { useRouter } from \"next/navigation\";\nimport { typedEntries, typedFromEntries } from \"@stackframe/stack-shared/dist/utils/objects\";\nimport styled from \"styled-components\";\n\nconst icons = typedFromEntries(typedEntries({\n RxPencil2,\n RxPerson,\n RxEnter,\n RxHalf2,\n RxFilePlus\n} as const).map(([key, value]) => {\n const styledComponent = styled(value)`\n color: ${SECONDARY_FONT_COLORS.light};\n\n html[data-stack-theme='dark'] & {\n color: ${SECONDARY_FONT_COLORS.dark};\n }\n `;\n return [\n key,\n React.createElement(styledComponent, { size: 20 })\n ];\n}));\n\nfunction Item(props: { text: string, icon: React.ReactNode, onClick: () => void | Promise<void> }) {\n return (\n <DropdownMenuItem \n onClick={() => runAsynchronously(props.onClick)}\n style={{ display: 'flex', gap: '0.5rem', alignItems: 'center' }}\n >\n {props.icon}\n <Text>{props.text}</Text>\n </DropdownMenuItem>\n );\n}\n\ntype UserButtonProps = {\n showUserInfo?: boolean,\n colorModeToggle?: () => void | Promise<void>,\n extraItems?: {\n text: string,\n icon: React.ReactNode,\n onClick: () => void | Promise<void>,\n }[],\n};\n\nexport default function UserButton(props: UserButtonProps) {\n return (\n <Suspense\n fallback={\n <Skeleton>\n <UserButtonInnerInner {...props} user={null} />\n </Skeleton>\n }\n >\n <UserButtonInner {...props} />\n </Suspense>\n );\n}\n\nfunction UserButtonInner(props: UserButtonProps) {\n const user = useUser();\n return <UserButtonInnerInner {...props} user={user} />;\n}\n\n\nfunction UserButtonInnerInner(props: UserButtonProps & { user: CurrentUser | null }) {\n const user = props.user;\n const app = useStackApp();\n const router = useRouter();\n\n const textStyles = {\n textOverflow: 'ellipsis', \n whiteSpace: 'nowrap', \n overflow: 'hidden',\n margin: 0,\n };\n\n return (\n <DropdownMenu>\n <DropdownMenuTrigger>\n <div style={{ display: 'flex', gap: '0.5rem', alignItems: 'center' }}>\n <UserAvatar user={user} />\n {user && props.showUserInfo && <div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>\n <Text style={textStyles}>{user.displayName}</Text>\n <Text style={{ ...textStyles, fontWeight: 400 }} variant=\"secondary\" size=\"sm\">{user.primaryEmail}</Text>\n </div>}\n </div>\n </DropdownMenuTrigger>\n <DropdownMenuContent style={{ zIndex: 1500 }}>\n <DropdownMenuLabel>\n <div style={{ display: 'flex', gap: '0.5rem', alignItems: 'center' }}>\n <UserAvatar user={user} />\n <div>\n {user && <Text>{user.displayName}</Text>}\n {user && <Text variant=\"secondary\" size=\"sm\" style={{ fontWeight: 400 }}>{user.primaryEmail}</Text>}\n {!user && <Text variant=\"secondary\">Not signed in</Text>}\n </div>\n </div>\n </DropdownMenuLabel>\n <DropdownMenuSeparator />\n {user && <Item \n text=\"Account settings\" \n onClick={() => runAsynchronously(router.push(app.urls.accountSettings))}\n icon={icons.RxPerson}\n />}\n {!user && <Item\n text=\"Sign in\"\n onClick={() => runAsynchronously(router.push(app.urls.signIn))}\n icon={icons.RxPerson}\n />}\n {!user && <Item\n text=\"Sign up\"\n onClick={() => runAsynchronously(router.push(app.urls.signUp))}\n icon={icons.RxPencil2}\n />}\n {user && props.extraItems && props.extraItems.map((item, index) => (\n <Item key={index} {...item} />\n ))}\n {props.colorModeToggle && (\n <Item \n text=\"Toggle theme\" \n onClick={props.colorModeToggle} \n icon={icons.RxHalf2}\n />\n )}\n {user && <Item \n text=\"Sign out\" \n onClick={() => user.signOut()} \n icon={icons.RxEnter}\n />}\n </DropdownMenuContent>\n </DropdownMenu>\n );\n}\n"],"mappings":"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","names":[]}
|
|
@@ -97,7 +97,7 @@ var StyledButton = styled.button`
|
|
|
97
97
|
font-family: ${FONT_FAMILY};
|
|
98
98
|
font-size: ${FONT_SIZES.md};
|
|
99
99
|
opacity: ${(props) => props.disabled ? 0.5 : 1};
|
|
100
|
-
transition: background-color 0.
|
|
100
|
+
transition: background-color 0.05s;
|
|
101
101
|
cursor: pointer;
|
|
102
102
|
position: relative;
|
|
103
103
|
&:disabled {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components-core/button.tsx"],"sourcesContent":["'use client';\n\nimport React, { useMemo } from \"react\";\nimport { useDesign } from \"../providers/design-provider\";\nimport Color from 'color';\nimport styled from 'styled-components';\nimport { BORDER_RADIUS, FONT_FAMILY, FONT_SIZES } from \"../utils/constants\";\nimport LoadingIndicator from \"./loading-indicator\";\n\nfunction getColors({\n propsColor, \n colors, \n variant, \n}: {\n propsColor?: string, \n colors: { primaryColor: string, secondaryColor: string, backgroundColor: string },\n variant: 'primary' | 'secondary' | 'warning',\n}): { \n bgColor: string, \n hoverBgColor: string,\n activeBgColor: string,\n textColor: string,\n} {\n let bgColor;\n switch (variant) {\n case 'primary': {\n bgColor = colors.primaryColor;\n break;\n }\n case 'secondary': {\n bgColor = colors.secondaryColor;\n break;\n }\n case 'warning': {\n bgColor = '#ff4500';\n break;\n }\n }\n if (propsColor) {\n bgColor = propsColor;\n }\n\n const c = Color(bgColor);\n const pc = Color(colors.primaryColor);\n\n const changeColor = (value: number) => {\n return c.hsl(c.hue(), c.saturationl(), c.lightness() + value).toString();\n };\n \n const getAlpha = (alpha: number) => {\n return Color(\n pc.isDark() ? 'white' : 'black'\n ).alpha(alpha).toString();\n };\n\n if (c.alpha() === 0) {\n return {\n bgColor: 'transparent',\n hoverBgColor: getAlpha(0.1),\n activeBgColor: getAlpha(0.2),\n textColor: colors.primaryColor,\n };\n } else if (c.isLight()) {\n return {\n bgColor,\n hoverBgColor: changeColor(-10),\n activeBgColor: changeColor(-20),\n textColor: 'black',\n };\n } else {\n return {\n bgColor,\n hoverBgColor: changeColor(10),\n activeBgColor: changeColor(20),\n textColor: 'white',\n };\n }\n}\n\nexport type ButtonProps = {\n variant?: 'primary' | 'secondary' | 'warning',\n color?: string,\n size?: 'sm' | 'md' | 'lg',\n loading?: boolean,\n onClick?: (() => void) | (() => Promise<void>),\n} & Omit<React.HTMLProps<HTMLButtonElement>, 'size' | 'type' | 'onClick'>\n\ntype ButtonColors = {\n bgColor: string, \n hoverBgColor: string,\n activeBgColor: string,\n textColor: string,\n}\n\nconst StyledButton = styled.button<{\n $size: 'sm' | 'md' | 'lg',\n $loading: boolean,\n $colors: {\n dark: ButtonColors,\n light: ButtonColors,\n },\n}>`\n border: 0;\n border-radius: ${BORDER_RADIUS};\n padding: ${props => {\n switch (props.$size) {\n case 'sm': { return '0rem 0.75rem'; }\n case 'md': { return '0rem 1rem'; }\n case 'lg': { return '0rem 2rem'; }\n }\n }};\n height: ${props => {\n switch (props.$size) {\n case 'sm': { return '2rem'; }\n case 'md': { return '2.5rem'; }\n case 'lg': { return '3rem'; }\n }\n }};\n font-family: ${FONT_FAMILY};\n font-size: ${FONT_SIZES.md};\n opacity: ${props => props.disabled ? 0.5 : 1};\n transition: background-color 0.
|
|
1
|
+
{"version":3,"sources":["../../../src/components-core/button.tsx"],"sourcesContent":["'use client';\n\nimport React, { useMemo } from \"react\";\nimport { useDesign } from \"../providers/design-provider\";\nimport Color from 'color';\nimport styled from 'styled-components';\nimport { BORDER_RADIUS, FONT_FAMILY, FONT_SIZES } from \"../utils/constants\";\nimport LoadingIndicator from \"./loading-indicator\";\n\nfunction getColors({\n propsColor, \n colors, \n variant, \n}: {\n propsColor?: string, \n colors: { primaryColor: string, secondaryColor: string, backgroundColor: string },\n variant: 'primary' | 'secondary' | 'warning',\n}): { \n bgColor: string, \n hoverBgColor: string,\n activeBgColor: string,\n textColor: string,\n} {\n let bgColor;\n switch (variant) {\n case 'primary': {\n bgColor = colors.primaryColor;\n break;\n }\n case 'secondary': {\n bgColor = colors.secondaryColor;\n break;\n }\n case 'warning': {\n bgColor = '#ff4500';\n break;\n }\n }\n if (propsColor) {\n bgColor = propsColor;\n }\n\n const c = Color(bgColor);\n const pc = Color(colors.primaryColor);\n\n const changeColor = (value: number) => {\n return c.hsl(c.hue(), c.saturationl(), c.lightness() + value).toString();\n };\n \n const getAlpha = (alpha: number) => {\n return Color(\n pc.isDark() ? 'white' : 'black'\n ).alpha(alpha).toString();\n };\n\n if (c.alpha() === 0) {\n return {\n bgColor: 'transparent',\n hoverBgColor: getAlpha(0.1),\n activeBgColor: getAlpha(0.2),\n textColor: colors.primaryColor,\n };\n } else if (c.isLight()) {\n return {\n bgColor,\n hoverBgColor: changeColor(-10),\n activeBgColor: changeColor(-20),\n textColor: 'black',\n };\n } else {\n return {\n bgColor,\n hoverBgColor: changeColor(10),\n activeBgColor: changeColor(20),\n textColor: 'white',\n };\n }\n}\n\nexport type ButtonProps = {\n variant?: 'primary' | 'secondary' | 'warning',\n color?: string,\n size?: 'sm' | 'md' | 'lg',\n loading?: boolean,\n onClick?: (() => void) | (() => Promise<void>),\n} & Omit<React.HTMLProps<HTMLButtonElement>, 'size' | 'type' | 'onClick'>\n\ntype ButtonColors = {\n bgColor: string, \n hoverBgColor: string,\n activeBgColor: string,\n textColor: string,\n}\n\nconst StyledButton = styled.button<{\n $size: 'sm' | 'md' | 'lg',\n $loading: boolean,\n $colors: {\n dark: ButtonColors,\n light: ButtonColors,\n },\n}>`\n border: 0;\n border-radius: ${BORDER_RADIUS};\n padding: ${props => {\n switch (props.$size) {\n case 'sm': { return '0rem 0.75rem'; }\n case 'md': { return '0rem 1rem'; }\n case 'lg': { return '0rem 2rem'; }\n }\n }};\n height: ${props => {\n switch (props.$size) {\n case 'sm': { return '2rem'; }\n case 'md': { return '2.5rem'; }\n case 'lg': { return '3rem'; }\n }\n }};\n font-family: ${FONT_FAMILY};\n font-size: ${FONT_SIZES.md};\n opacity: ${props => props.disabled ? 0.5 : 1};\n transition: background-color 0.05s;\n cursor: pointer;\n position: relative;\n &:disabled {\n cursor: auto;\n opacity: 0.5;\n }\n\n background-color: ${props => props.$colors.light.bgColor};\n color: ${props => props.$colors.light.textColor};\n &:not([disabled]) {\n &:active,&:hover:active {\n background-color: ${props => props.$colors.light.activeBgColor};\n }\n &:hover {\n background-color: ${props => props.$colors.light.hoverBgColor};\n }\n }\n\n html[data-stack-theme='dark'] & {\n background-color: ${props => props.$colors.dark.bgColor};\n color: ${props => props.$colors.dark.textColor};\n &:not([disabled]) {\n &:active,&:hover:active {\n background-color: ${props => props.$colors.dark.activeBgColor};\n }\n &:hover {\n background-color: ${props => props.$colors.dark.hoverBgColor};\n }\n }\n }\n`;\n\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n ({\n variant='primary',\n size='md',\n loading=false,\n ...props\n }, ref) => {\n const { colors } = useDesign();\n\n const { dark, light } = useMemo(() => {\n return {\n dark: getColors({ propsColor: props.color, colors: colors.dark, variant }),\n light: getColors({ propsColor: props.color, colors: colors.light, variant }),\n };\n }, [props.color, colors, variant]);\n\n return (\n <StyledButton\n ref={ref}\n $size={size}\n $loading={loading}\n $colors={{ dark, light }}\n {...props}\n >\n <span style={{ position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%, -50%)', visibility: loading ? 'visible' : 'hidden' }}>\n <LoadingIndicator color={{ light: light.textColor, dark: dark.textColor }}/>\n </span>\n <span style={{ visibility: loading ? 'hidden' : 'visible', whiteSpace: 'nowrap' }}>\n {props.children}\n </span>\n </StyledButton>\n );\n }\n);\n\nButton.displayName = 'Button';\n\nexport {\n Button,\n};\n"],"mappings":"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","names":[]}
|
|
@@ -15,6 +15,9 @@ var StyledTrigger = styled(DropdownMenuPrimitive.Trigger)`
|
|
|
15
15
|
outline: none;
|
|
16
16
|
box-shadow: 0;
|
|
17
17
|
}
|
|
18
|
+
&:hover {
|
|
19
|
+
cursor: pointer;
|
|
20
|
+
}
|
|
18
21
|
`;
|
|
19
22
|
var DropdownMenuTrigger = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(StyledTrigger, { ref, ...props }));
|
|
20
23
|
var StyledContent = styled(DropdownMenuPrimitive.Content)`
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components-core/dropdown.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport styled from 'styled-components';\nimport * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';\nimport { useDesign } from '..';\nimport { SELECTED_BACKGROUND_COLORS } from '../utils/constants';\nimport { ColorPalette } from '../providers/design-provider';\n\nconst DropdownMenu = DropdownMenuPrimitive.Root;\n\nconst StyledTrigger = styled(DropdownMenuPrimitive.Trigger)`\n all: unset;\n &:focus {\n outline: none;\n box-shadow: 0;\n }\n`;\n\nconst DropdownMenuTrigger = React.forwardRef<\n React.ElementRef<typeof DropdownMenuPrimitive.Trigger>,\n React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Trigger>\n>(({ className, ...props }, ref) => (\n <StyledTrigger ref={ref} {...props} />\n));\n\nconst StyledContent = styled(DropdownMenuPrimitive.Content)<{\n $colors: ColorPalette,\n}>`\n z-index: 50;\n min-width: 8rem;\n overflow: hidden;\n border-radius: 4px;\n padding: 0.25rem;\n box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n\n border: 1px solid ${({ $colors }) => $colors.light.neutralColor};\n background: ${({ $colors }) => $colors.light.backgroundColor};\n\n html[data-stack-theme='dark'] & {\n border-color: ${({ $colors }) => $colors.dark.neutralColor};\n background: ${({ $colors }) => $colors.dark.backgroundColor};\n }\n`;\n\nconst DropdownMenuContent = React.forwardRef<\n React.ElementRef<typeof DropdownMenuPrimitive.Content>,\n React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>\n>(({ className, sideOffset = 4, ...props }, ref) => {\n const { colors } = useDesign();\n return (\n <DropdownMenuPrimitive.Portal>\n <StyledContent \n $colors={colors}\n sideOffset={sideOffset} \n ref={ref} \n {...props} \n />\n </DropdownMenuPrimitive.Portal>\n );\n});\nDropdownMenuContent.displayName = 'DropdownMenuContent';\n\nconst StyledItem = styled(DropdownMenuPrimitive.Item)<{ \n $inset?: boolean,\n}>`\n display: flex;\n cursor: default;\n align-items: center;\n border-radius: 4px;\n padding: 0.375rem 0.5rem;\n font-size: 0.875rem;\n outline: none;\n transition: color 0.2s ease;\n &:focus {\n background-color: var(--accent);\n color: var(--accent-foreground);\n }\n ${({ $inset }) => $inset && 'padding-left: 2rem;'}\n\n &:hover {\n background-color: ${SELECTED_BACKGROUND_COLORS.light};\n }\n\n html[data-stack-theme='dark'] & {\n &:hover {\n background-color: ${SELECTED_BACKGROUND_COLORS.dark};\n }\n }\n`;\n\nconst DropdownMenuItem = React.forwardRef<\n React.ElementRef<typeof DropdownMenuPrimitive.Item>,\n React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {\n inset?: boolean,\n }\n>(({ className, inset, ...props }, ref) => {\n return <StyledItem ref={ref} {...props} $inset={inset} />;\n});\nDropdownMenuItem.displayName = 'DropdownMenuItem';\n\nconst StyledLabel = styled(DropdownMenuPrimitive.Label)<{ inset?: boolean }>`\n padding: 0.375rem 0.5rem;\n font-size: 0.875rem;\n ${({ inset }) => inset && 'padding-left: 2rem;'}\n`;\n\nconst DropdownMenuLabel = React.forwardRef<\n React.ElementRef<typeof DropdownMenuPrimitive.Label>,\n React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {\n inset?: boolean,\n }\n>(({ className, inset, ...props }, ref) => (\n <StyledLabel ref={ref} {...props} inset={inset} />\n));\nDropdownMenuLabel.displayName = 'DropdownMenuLabel';\n\nconst StyledSeparator = styled(DropdownMenuPrimitive.Separator)<{\n $colors: ColorPalette,\n}>`\n margin: 0.25rem -0.25rem;\n height: 1px;\n background-color: ${({ $colors }) => $colors.light.neutralColor};\n\n html[data-stack-theme='dark'] & {\n background-color: ${({ $colors }) => $colors.dark.neutralColor};\n }\n`;\n\nconst DropdownMenuSeparator = React.forwardRef<\n React.ElementRef<typeof DropdownMenuPrimitive.Separator>,\n React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>\n>(({ className, ...props }, ref) => {\n const { colors } = useDesign();\n return <StyledSeparator ref={ref} {...props} $colors={colors} />;\n});\nDropdownMenuSeparator.displayName = 'DropdownMenuSeparator';\n\nexport {\n DropdownMenu,\n DropdownMenuTrigger,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n};\n"],"mappings":";;;AAEA,YAAY,WAAW;AACvB,OAAO,YAAY;AACnB,YAAY,2BAA2B;AACvC,SAAS,iBAAiB;AAC1B,SAAS,kCAAkC;
|
|
1
|
+
{"version":3,"sources":["../../../src/components-core/dropdown.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport styled from 'styled-components';\nimport * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';\nimport { useDesign } from '..';\nimport { SELECTED_BACKGROUND_COLORS } from '../utils/constants';\nimport { ColorPalette } from '../providers/design-provider';\n\nconst DropdownMenu = DropdownMenuPrimitive.Root;\n\nconst StyledTrigger = styled(DropdownMenuPrimitive.Trigger)`\n all: unset;\n &:focus {\n outline: none;\n box-shadow: 0;\n }\n &:hover {\n cursor: pointer;\n }\n`;\n\nconst DropdownMenuTrigger = React.forwardRef<\n React.ElementRef<typeof DropdownMenuPrimitive.Trigger>,\n React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Trigger>\n>(({ className, ...props }, ref) => (\n <StyledTrigger ref={ref} {...props} />\n));\n\nconst StyledContent = styled(DropdownMenuPrimitive.Content)<{\n $colors: ColorPalette,\n}>`\n z-index: 50;\n min-width: 8rem;\n overflow: hidden;\n border-radius: 4px;\n padding: 0.25rem;\n box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n\n border: 1px solid ${({ $colors }) => $colors.light.neutralColor};\n background: ${({ $colors }) => $colors.light.backgroundColor};\n\n html[data-stack-theme='dark'] & {\n border-color: ${({ $colors }) => $colors.dark.neutralColor};\n background: ${({ $colors }) => $colors.dark.backgroundColor};\n }\n`;\n\nconst DropdownMenuContent = React.forwardRef<\n React.ElementRef<typeof DropdownMenuPrimitive.Content>,\n React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>\n>(({ className, sideOffset = 4, ...props }, ref) => {\n const { colors } = useDesign();\n return (\n <DropdownMenuPrimitive.Portal>\n <StyledContent \n $colors={colors}\n sideOffset={sideOffset} \n ref={ref} \n {...props} \n />\n </DropdownMenuPrimitive.Portal>\n );\n});\nDropdownMenuContent.displayName = 'DropdownMenuContent';\n\nconst StyledItem = styled(DropdownMenuPrimitive.Item)<{ \n $inset?: boolean,\n}>`\n display: flex;\n cursor: default;\n align-items: center;\n border-radius: 4px;\n padding: 0.375rem 0.5rem;\n font-size: 0.875rem;\n outline: none;\n transition: color 0.2s ease;\n &:focus {\n background-color: var(--accent);\n color: var(--accent-foreground);\n }\n ${({ $inset }) => $inset && 'padding-left: 2rem;'}\n\n &:hover {\n background-color: ${SELECTED_BACKGROUND_COLORS.light};\n }\n\n html[data-stack-theme='dark'] & {\n &:hover {\n background-color: ${SELECTED_BACKGROUND_COLORS.dark};\n }\n }\n`;\n\nconst DropdownMenuItem = React.forwardRef<\n React.ElementRef<typeof DropdownMenuPrimitive.Item>,\n React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {\n inset?: boolean,\n }\n>(({ className, inset, ...props }, ref) => {\n return <StyledItem ref={ref} {...props} $inset={inset} />;\n});\nDropdownMenuItem.displayName = 'DropdownMenuItem';\n\nconst StyledLabel = styled(DropdownMenuPrimitive.Label)<{ inset?: boolean }>`\n padding: 0.375rem 0.5rem;\n font-size: 0.875rem;\n ${({ inset }) => inset && 'padding-left: 2rem;'}\n`;\n\nconst DropdownMenuLabel = React.forwardRef<\n React.ElementRef<typeof DropdownMenuPrimitive.Label>,\n React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {\n inset?: boolean,\n }\n>(({ className, inset, ...props }, ref) => (\n <StyledLabel ref={ref} {...props} inset={inset} />\n));\nDropdownMenuLabel.displayName = 'DropdownMenuLabel';\n\nconst StyledSeparator = styled(DropdownMenuPrimitive.Separator)<{\n $colors: ColorPalette,\n}>`\n margin: 0.25rem -0.25rem;\n height: 1px;\n background-color: ${({ $colors }) => $colors.light.neutralColor};\n\n html[data-stack-theme='dark'] & {\n background-color: ${({ $colors }) => $colors.dark.neutralColor};\n }\n`;\n\nconst DropdownMenuSeparator = React.forwardRef<\n React.ElementRef<typeof DropdownMenuPrimitive.Separator>,\n React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>\n>(({ className, ...props }, ref) => {\n const { colors } = useDesign();\n return <StyledSeparator ref={ref} {...props} $colors={colors} />;\n});\nDropdownMenuSeparator.displayName = 'DropdownMenuSeparator';\n\nexport {\n DropdownMenu,\n DropdownMenuTrigger,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n};\n"],"mappings":";;;AAEA,YAAY,WAAW;AACvB,OAAO,YAAY;AACnB,YAAY,2BAA2B;AACvC,SAAS,iBAAiB;AAC1B,SAAS,kCAAkC;AAoBzC;AAjBF,IAAM,eAAqC;AAE3C,IAAM,gBAAgB,OAA6B,6BAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAW1D,IAAM,sBAA4B,iBAGhC,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QAC1B,oBAAC,iBAAc,KAAW,GAAG,OAAO,CACrC;AAED,IAAM,gBAAgB,OAA6B,6BAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAUpC,CAAC,EAAE,QAAQ,MAAM,QAAQ,MAAM,YAAY;AAAA,gBACjD,CAAC,EAAE,QAAQ,MAAM,QAAQ,MAAM,eAAe;AAAA;AAAA;AAAA,oBAG1C,CAAC,EAAE,QAAQ,MAAM,QAAQ,KAAK,YAAY;AAAA,kBAC5C,CAAC,EAAE,QAAQ,MAAM,QAAQ,KAAK,eAAe;AAAA;AAAA;AAI/D,IAAM,sBAA4B,iBAGhC,CAAC,EAAE,WAAW,aAAa,GAAG,GAAG,MAAM,GAAG,QAAQ;AAClD,QAAM,EAAE,OAAO,IAAI,UAAU;AAC7B,SACE,oBAAuB,8BAAtB,EACC;AAAA,IAAC;AAAA;AAAA,MACC,SAAS;AAAA,MACT;AAAA,MACA;AAAA,MACC,GAAG;AAAA;AAAA,EACN,GACF;AAEJ,CAAC;AACD,oBAAoB,cAAc;AAElC,IAAM,aAAa,OAA6B,0BAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAehD,CAAC,EAAE,OAAO,MAAM,UAAU,qBAAqB;AAAA;AAAA;AAAA,wBAG3B,2BAA2B,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA,0BAK9B,2BAA2B,IAAI;AAAA;AAAA;AAAA;AAKzD,IAAM,mBAAyB,iBAK7B,CAAC,EAAE,WAAW,OAAO,GAAG,MAAM,GAAG,QAAQ;AACzC,SAAO,oBAAC,cAAW,KAAW,GAAG,OAAO,QAAQ,OAAO;AACzD,CAAC;AACD,iBAAiB,cAAc;AAE/B,IAAM,cAAc,OAA6B,2BAAK;AAAA;AAAA;AAAA,IAGlD,CAAC,EAAE,MAAM,MAAM,SAAS,qBAAqB;AAAA;AAGjD,IAAM,oBAA0B,iBAK9B,CAAC,EAAE,WAAW,OAAO,GAAG,MAAM,GAAG,QACjC,oBAAC,eAAY,KAAW,GAAG,OAAO,OAAc,CACjD;AACD,kBAAkB,cAAc;AAEhC,IAAM,kBAAkB,OAA6B,+BAAS;AAAA;AAAA;AAAA,sBAKxC,CAAC,EAAE,QAAQ,MAAM,QAAQ,MAAM,YAAY;AAAA;AAAA;AAAA,wBAGzC,CAAC,EAAE,QAAQ,MAAM,QAAQ,KAAK,YAAY;AAAA;AAAA;AAIlE,IAAM,wBAA8B,iBAGlC,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QAAQ;AAClC,QAAM,EAAE,OAAO,IAAI,UAAU;AAC7B,SAAO,oBAAC,mBAAgB,KAAW,GAAG,OAAO,SAAS,QAAQ;AAChE,CAAC;AACD,sBAAsB,cAAc;","names":[]}
|