@stackframe/stack 2.3.4 → 2.3.7

package/dist/esm/components-core/avatar.js

@@ -0,0 +1,56 @@
+// src/components-core/avatar.tsx
+import * as React from "react";
+import * as AvatarPrimitive from "@radix-ui/react-avatar";
+import styled from "styled-components";
+import { useDesign } from "..";
+import { jsx } from "react/jsx-runtime";
+var StyledAvatar = styled(AvatarPrimitive.Root)`
+  position: relative;
+  display: flex;
+  height: 2rem;
+  width: 2rem;
+  flex-shrink: 0;
+  overflow: hidden;
+  border-radius: 9999px;
+`;
+var Avatar = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(StyledAvatar, { ref, className, ...props }));
+Avatar.displayName = "Avatar";
+var StyledAvatarImage = styled(AvatarPrimitive.Image)`
+  aspect-ratio: 1 / 1;
+  height: 100%;
+  width: 100%;
+`;
+var AvatarImage = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(StyledAvatarImage, { ref, className, ...props }));
+AvatarImage.displayName = "AvatarImage";
+var StyledAvatarFallback = styled(AvatarPrimitive.Fallback)`
+  display: flex;
+  height: 100%;
+  width: 100%;
+  align-items: center;
+  justify-content: center;
+  border-radius: 9999px;
+  
+  background-color: ${({ $colors }) => $colors.light.secondaryColor};
+
+  html[data-theme='dark'] & {
+    background-color: ${({ $colors }) => $colors.dark.secondaryColor};
+  }
+`;
+var AvatarFallback = React.forwardRef(({ className, ...props }, ref) => {
+  const { colors } = useDesign();
+  return /* @__PURE__ */ jsx(
+    StyledAvatarFallback,
+    {
+      ref,
+      className,
+      $colors: colors,
+      ...props
+    }
+  );
+});
+AvatarFallback.displayName = "AvatarFallback";
+export {
+  Avatar,
+  AvatarFallback,
+  AvatarImage
+};

package/dist/esm/components-core/button.js

@@ -0,0 +1,165 @@
+"use client";
+"use client";
+
+// src/components-core/button.tsx
+import React, { useMemo } from "react";
+import { useDesign } from "../providers/design-provider";
+import Color from "color";
+import styled from "styled-components";
+import { BORDER_RADIUS, FONT_FAMILY, FONT_SIZES } from "../utils/constants";
+import LoadingIndicator from "./loading-indicator";
+import { jsx, jsxs } from "react/jsx-runtime";
+function getColors({
+  propsColor,
+  colors,
+  variant
+}) {
+  let bgColor;
+  switch (variant) {
+    case "primary": {
+      bgColor = colors.primaryColor;
+      break;
+    }
+    case "secondary": {
+      bgColor = colors.secondaryColor;
+      break;
+    }
+    case "warning": {
+      bgColor = "#ff4500";
+      break;
+    }
+  }
+  if (propsColor) {
+    bgColor = propsColor;
+  }
+  const c = Color(bgColor);
+  const pc = Color(colors.primaryColor);
+  const changeColor = (value) => {
+    return c.hsl(c.hue(), c.saturationl(), c.lightness() + value).toString();
+  };
+  const getAlpha = (alpha) => {
+    return Color(
+      pc.isDark() ? "white" : "black"
+    ).alpha(alpha).toString();
+  };
+  if (c.alpha() === 0) {
+    return {
+      bgColor: "transparent",
+      hoverBgColor: getAlpha(0.1),
+      activeBgColor: getAlpha(0.2),
+      textColor: colors.primaryColor
+    };
+  } else if (c.isLight()) {
+    return {
+      bgColor,
+      hoverBgColor: changeColor(-10),
+      activeBgColor: changeColor(-20),
+      textColor: "black"
+    };
+  } else {
+    return {
+      bgColor,
+      hoverBgColor: changeColor(10),
+      activeBgColor: changeColor(20),
+      textColor: "white"
+    };
+  }
+}
+var StyledButton = styled.button`
+  border: 0;
+  border-radius: ${BORDER_RADIUS};
+  padding: ${(props) => {
+  switch (props.$size) {
+    case "sm": {
+      return "0rem 0.75rem";
+    }
+    case "md": {
+      return "0rem 1rem";
+    }
+    case "lg": {
+      return "0rem 2rem";
+    }
+  }
+}};
+  height: ${(props) => {
+  switch (props.$size) {
+    case "sm": {
+      return "2rem";
+    }
+    case "md": {
+      return "2.5rem";
+    }
+    case "lg": {
+      return "3rem";
+    }
+  }
+}};
+  font-family: ${FONT_FAMILY};
+  font-size: ${FONT_SIZES.md};
+  opacity: ${(props) => props.disabled ? 0.5 : 1};
+  transition: background-color 0.2s;
+  cursor: pointer;
+  position: relative;
+  &:disabled {
+    cursor: auto;
+    opacity: 0.5;
+  }
+
+  background-color: ${(props) => props.$colors.light.bgColor};
+  color: ${(props) => props.$colors.light.textColor};
+  &:not([disabled]) {
+    &:active,&:hover:active {
+      background-color: ${(props) => props.$colors.light.activeBgColor};
+    }
+    &:hover {
+      background-color: ${(props) => props.$colors.light.hoverBgColor};
+    }
+  }
+
+  html[data-theme='dark'] & {
+    background-color: ${(props) => props.$colors.dark.bgColor};
+    color: ${(props) => props.$colors.dark.textColor};
+    &:not([disabled]) {
+      &:active,&:hover:active {
+        background-color: ${(props) => props.$colors.dark.activeBgColor};
+      }
+      &:hover {
+        background-color: ${(props) => props.$colors.dark.hoverBgColor};
+      }
+    }
+  }
+`;
+var Button = React.forwardRef(
+  ({
+    variant = "primary",
+    size = "md",
+    loading = false,
+    ...props
+  }, ref) => {
+    const { colors } = useDesign();
+    const { dark, light } = useMemo(() => {
+      return {
+        dark: getColors({ propsColor: props.color, colors: colors.dark, variant }),
+        light: getColors({ propsColor: props.color, colors: colors.light, variant })
+      };
+    }, [props.color, colors, variant]);
+    return /* @__PURE__ */ jsxs(
+      StyledButton,
+      {
+        ref,
+        $size: size,
+        $loading: loading,
+        $colors: { dark, light },
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx("div", { style: { position: "absolute", top: "50%", left: "50%", transform: "translate(-50%, -50%)", visibility: loading ? "visible" : "hidden" }, children: /* @__PURE__ */ jsx(LoadingIndicator, { color: { light: light.textColor, dark: dark.textColor } }) }),
+          /* @__PURE__ */ jsx("div", { style: { visibility: loading ? "hidden" : "visible" }, children: props.children })
+        ]
+      }
+    );
+  }
+);
+Button.displayName = "Button";
+export {
+  Button
+};

package/dist/esm/components-core/card.js

@@ -0,0 +1,51 @@
+"use client";
+"use client";
+
+// src/components-core/card.tsx
+import * as React from "react";
+import styled from "styled-components";
+import { useDesign } from "..";
+import { jsx } from "react/jsx-runtime";
+var StyledCard = styled.div`
+  border-radius: 0.5rem;
+  box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05);
+  padding: 1.5rem;
+
+  border: 1px solid ${(props) => props.$colors.light.neutralColor};
+  background-color: ${(props) => props.$colors.light.backgroundColor};
+
+  html[data-theme='dark'] & {
+    border-color: ${(props) => props.$colors.dark.neutralColor};
+    background-color: ${(props) => props.$colors.dark.backgroundColor};
+  }
+`;
+var StyledCardHeader = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 0.375rem;
+  margin-bottom: 1.5rem;
+`;
+var StyledCardContent = styled.div`
+`;
+var StyledCardFooter = styled.div`
+  display: flex;
+  align-items: center;
+  margin-top: 1.5rem;
+`;
+var Card = React.forwardRef((props, ref) => {
+  const { colors } = useDesign();
+  return /* @__PURE__ */ jsx(StyledCard, { ref, ...props, $colors: colors });
+});
+Card.displayName = "Card";
+var CardHeader = React.forwardRef((props, ref) => /* @__PURE__ */ jsx(StyledCardHeader, { ref, ...props }));
+CardHeader.displayName = "CardHeader";
+var CardContent = React.forwardRef((props, ref) => /* @__PURE__ */ jsx(StyledCardContent, { ref, ...props }));
+CardContent.displayName = "CardContent";
+var CardFooter = React.forwardRef((props, ref) => /* @__PURE__ */ jsx(StyledCardFooter, { ref, ...props }));
+CardFooter.displayName = "CardFooter";
+export {
+  Card,
+  CardContent,
+  CardFooter,
+  CardHeader
+};

package/dist/esm/components-core/collapsible.js

@@ -0,0 +1,13 @@
+"use client";
+"use client";
+
+// src/components-core/collapsible.tsx
+import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
+var Collapsible = CollapsiblePrimitive.Root;
+var CollapsibleTrigger2 = CollapsiblePrimitive.CollapsibleTrigger;
+var CollapsibleContent2 = CollapsiblePrimitive.CollapsibleContent;
+export {
+  Collapsible,
+  CollapsibleContent2 as CollapsibleContent,
+  CollapsibleTrigger2 as CollapsibleTrigger
+};

package/dist/esm/components-core/container.js

@@ -0,0 +1,35 @@
+"use client";
+"use client";
+
+// src/components-core/container.tsx
+import { useDesign } from "../providers/design-provider";
+import styled from "styled-components";
+import { jsx } from "react/jsx-runtime";
+var OuterContainer = styled.div`
+  display: flex;
+  justify-content: center;
+  width: 100%;
+`;
+var InnerContainer = styled.div`
+  width: 100%;
+  @media (min-width: ${(props) => props.$breakpoint}px) {
+    width: ${(props) => props.$breakpoint}px;
+  }
+`;
+function Container({
+  size = "md",
+  ...props
+}) {
+  const { breakpoints } = useDesign();
+  return /* @__PURE__ */ jsx(OuterContainer, { children: /* @__PURE__ */ jsx(
+    InnerContainer,
+    {
+      $breakpoint: typeof size === "number" ? size : breakpoints[size],
+      ...props,
+      children: props.children
+    }
+  ) });
+}
+export {
+  Container
+};

package/dist/esm/components-core/dropdown.js

@@ -0,0 +1,106 @@
+"use client";
+"use client";
+
+// src/components-core/dropdown.tsx
+import * as React from "react";
+import styled from "styled-components";
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import { useDesign } from "..";
+import { SELECTED_BACKGROUND_COLORS } from "../utils/constants";
+import { jsx } from "react/jsx-runtime";
+var DropdownMenu = DropdownMenuPrimitive.Root;
+var StyledTrigger = styled(DropdownMenuPrimitive.Trigger)`
+  all: unset;
+  &:focus {
+    outline: none;
+    box-shadow: 0;
+  }
+`;
+var DropdownMenuTrigger = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(StyledTrigger, { ref, ...props }));
+var StyledContent = styled(DropdownMenuPrimitive.Content)`
+  z-index: 50;
+  min-width: 8rem;
+  overflow: hidden;
+  border-radius: 4px;
+  padding: 0.25rem;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+
+  border: 1px solid ${({ $colors }) => $colors.light.neutralColor};
+  background: ${({ $colors }) => $colors.light.backgroundColor};
+
+  html[data-theme='dark'] & {
+    border-color: ${({ $colors }) => $colors.dark.neutralColor};
+    background: ${({ $colors }) => $colors.dark.backgroundColor};
+  }
+`;
+var DropdownMenuContent = React.forwardRef(({ className, sideOffset = 4, ...props }, ref) => {
+  const { colors } = useDesign();
+  return /* @__PURE__ */ jsx(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx(
+    StyledContent,
+    {
+      $colors: colors,
+      sideOffset,
+      ref,
+      ...props
+    }
+  ) });
+});
+DropdownMenuContent.displayName = "DropdownMenuContent";
+var StyledItem = styled(DropdownMenuPrimitive.Item)`
+  display: flex;
+  cursor: default;
+  align-items: center;
+  border-radius: 4px;
+  padding: 0.375rem 0.5rem;
+  font-size: 0.875rem;
+  outline: none;
+  transition: color 0.2s ease;
+  &:focus {
+    background-color: var(--accent);
+    color: var(--accent-foreground);
+  }
+  ${({ $inset }) => $inset && "padding-left: 2rem;"}
+
+  &:hover {
+    background-color: ${SELECTED_BACKGROUND_COLORS.light};
+  }
+
+  html[data-theme='dark'] & {
+    &:hover {
+      background-color: ${SELECTED_BACKGROUND_COLORS.dark};
+    }
+  }
+`;
+var DropdownMenuItem = React.forwardRef(({ className, inset, ...props }, ref) => {
+  return /* @__PURE__ */ jsx(StyledItem, { ref, ...props, $inset: inset });
+});
+DropdownMenuItem.displayName = "DropdownMenuItem";
+var StyledLabel = styled(DropdownMenuPrimitive.Label)`
+  padding: 0.375rem 0.5rem;
+  font-size: 0.875rem;
+  ${({ inset }) => inset && "padding-left: 2rem;"}
+`;
+var DropdownMenuLabel = React.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx(StyledLabel, { ref, ...props, inset }));
+DropdownMenuLabel.displayName = "DropdownMenuLabel";
+var StyledSeparator = styled(DropdownMenuPrimitive.Separator)`
+  margin: 0.25rem -0.25rem;
+  height: 1px;
+  background-color: ${({ $colors }) => $colors.light.neutralColor};
+
+  html[data-theme='dark'] & {
+    background-color: ${({ $colors }) => $colors.dark.neutralColor};
+  }
+`;
+var DropdownMenuSeparator = React.forwardRef(({ className, ...props }, ref) => {
+  const { colors } = useDesign();
+  return /* @__PURE__ */ jsx(StyledSeparator, { ref, ...props, $colors: colors });
+});
+DropdownMenuSeparator.displayName = "DropdownMenuSeparator";
+export {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger
+};

package/dist/esm/components-core/index.js

@@ -0,0 +1,93 @@
+"use client";
+"use client";
+
+// src/components-core/index.tsx
+import { forwardRef } from "react";
+import { useComponents } from "../providers/component-provider";
+import { useAsyncCallbackWithLoggedError } from "@stackframe/stack-shared/dist/hooks/use-async-callback";
+import { jsx } from "react/jsx-runtime";
+var Button = forwardRef((props, ref) => {
+  const { Button: Button2 } = useComponents();
+  const [onClick, onClickLoading] = useAsyncCallbackWithLoggedError(async () => {
+    return await props.onClick?.();
+  }, [props.onClick]);
+  return /* @__PURE__ */ jsx(
+    Button2,
+    {
+      ...props,
+      onClick: props.onClick && onClick,
+      loading: props.loading || onClickLoading,
+      disabled: props.disabled || onClickLoading,
+      ref
+    }
+  );
+});
+function createDynamicComponent(component) {
+  return forwardRef((props, ref) => {
+    const Component = useComponents()[component];
+    return /* @__PURE__ */ jsx(Component, { ...props, ref });
+  });
+}
+var Input = createDynamicComponent("Input");
+var Container = createDynamicComponent("Container");
+var Separator = createDynamicComponent("Separator");
+var Label = createDynamicComponent("Label");
+var Link = createDynamicComponent("Link");
+var Text = createDynamicComponent("Text");
+var Popover = createDynamicComponent("Popover");
+var PopoverTrigger = createDynamicComponent("PopoverTrigger");
+var PopoverContent = createDynamicComponent("PopoverContent");
+var DropdownMenu = createDynamicComponent("DropdownMenu");
+var DropdownMenuTrigger = createDynamicComponent("DropdownMenuTrigger");
+var DropdownMenuContent = createDynamicComponent("DropdownMenuContent");
+var DropdownMenuItem = createDynamicComponent("DropdownMenuItem");
+var DropdownMenuLabel = createDynamicComponent("DropdownMenuLabel");
+var DropdownMenuSeparator = createDynamicComponent("DropdownMenuSeparator");
+var Avatar = createDynamicComponent("Avatar");
+var AvatarFallback = createDynamicComponent("AvatarFallback");
+var AvatarImage = createDynamicComponent("AvatarImage");
+var Collapsible = createDynamicComponent("Collapsible");
+var CollapsibleTrigger = createDynamicComponent("CollapsibleTrigger");
+var CollapsibleContent = createDynamicComponent("CollapsibleContent");
+var Card = createDynamicComponent("Card");
+var CardHeader = createDynamicComponent("CardHeader");
+var CardContent = createDynamicComponent("CardContent");
+var CardFooter = createDynamicComponent("CardFooter");
+var Tabs = createDynamicComponent("Tabs");
+var TabsList = createDynamicComponent("TabsList");
+var TabsContent = createDynamicComponent("TabsContent");
+var TabsTrigger = createDynamicComponent("TabsTrigger");
+var Skeleton = createDynamicComponent("Skeleton");
+export {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+  Button,
+  Card,
+  CardContent,
+  CardFooter,
+  CardHeader,
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+  Container,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+  Input,
+  Label,
+  Link,
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+  Separator,
+  Skeleton,
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+  Text
+};

package/dist/esm/components-core/input.js

@@ -0,0 +1,80 @@
+"use client";
+"use client";
+
+// src/components-core/input.tsx
+import React from "react";
+import { useDesign } from "../providers/design-provider";
+import styled from "styled-components";
+import { BORDER_RADIUS, FONT_FAMILY, FONT_SIZES, PRIMARY_FONT_COLORS, SECONDARY_FONT_COLORS } from "../utils/constants";
+import { jsx } from "react/jsx-runtime";
+var StyledInput = styled.input`
+  font-family: ${FONT_FAMILY};
+  font-size: ${FONT_SIZES.md};
+  height: 2.5rem;
+  border-radius: ${BORDER_RADIUS};
+  background-color: transparent;
+  border: 1px solid;
+  padding: 0rem 1rem;
+  &:disabled {
+    cursor: auto;
+    opacity: 0.5;
+  }
+  &[type=file]::file-selector-button{
+    border: none;
+    background-color: transparent;
+    height: 2.5rem;
+    margin-right: 0.5rem;
+    padding: 0;
+  }
+
+  border-color: ${(props) => props.$colors.light.neutralColor};
+  color: ${PRIMARY_FONT_COLORS.light};
+  &::placeholder {
+    color: ${SECONDARY_FONT_COLORS.light};
+  }
+  &:focus-visible {
+    outline: none;
+    box-shadow: 0 0 0 2px ${(props) => props.$colors.light.primaryColor};
+  }
+  &[type=file] {
+    color: ${SECONDARY_FONT_COLORS.light};
+  }
+  &[type=file]::file-selector-button{
+    color: ${PRIMARY_FONT_COLORS.light};
+  }
+
+  html[data-theme='dark'] & {
+    border-color: ${(props) => props.$colors.dark.neutralColor};
+    color: ${PRIMARY_FONT_COLORS.dark};
+    &::placeholder {
+      color: ${SECONDARY_FONT_COLORS.dark};
+    }
+    &:focus-visible {
+      outline: none;
+      box-shadow: 0 0 0 2px ${(props) => props.$colors.dark.primaryColor};
+    }
+    &[type=file] {
+      color: ${SECONDARY_FONT_COLORS.dark};
+    }
+    &[type=file]::file-selector-button{
+      color: ${PRIMARY_FONT_COLORS.dark};
+    }
+  }
+`;
+var Input = React.forwardRef(
+  (props, ref) => {
+    const { colors } = useDesign();
+    return /* @__PURE__ */ jsx(
+      StyledInput,
+      {
+        ref,
+        $colors: colors,
+        ...props
+      }
+    );
+  }
+);
+Input.displayName = "Input";
+export {
+  Input
+};

package/dist/esm/components-core/label.js

@@ -0,0 +1,38 @@
+"use client";
+"use client";
+
+// src/components-core/label.tsx
+import React from "react";
+import * as LabelPrimitive from "@radix-ui/react-label";
+import styled from "styled-components";
+import { FONT_FAMILY, FONT_SIZES, SECONDARY_FONT_COLORS } from "../utils/constants";
+import { jsx } from "react/jsx-runtime";
+var Primitive = styled(LabelPrimitive.Root)`
+  font-size: ${FONT_SIZES.sm};
+  line-height: 1;
+  font-weight: 500;
+  font-family: ${FONT_FAMILY};
+  display: block;
+  margin-bottom: 0.5rem;
+
+  color: ${SECONDARY_FONT_COLORS.light};
+
+  html[data-theme='dark'] & {
+    color: ${SECONDARY_FONT_COLORS.dark};
+  }
+`;
+var Label = React.forwardRef(
+  (props, ref) => {
+    return /* @__PURE__ */ jsx(
+      Primitive,
+      {
+        ref,
+        ...props
+      }
+    );
+  }
+);
+Label.displayName = LabelPrimitive.Root.displayName;
+export {
+  Label
+};

package/dist/esm/components-core/link.js

@@ -0,0 +1,38 @@
+"use client";
+"use client";
+
+// src/components-core/link.tsx
+import NextLink from "next/link";
+import { FONT_FAMILY, FONT_SIZES, LINE_HEIGHTS, LINK_COLORS } from "../utils/constants";
+import React from "react";
+import styled from "styled-components";
+import { jsx } from "react/jsx-runtime";
+var StyledNextLink = styled(NextLink)`
+  font-size: ${(props) => FONT_SIZES[props.$size]};
+  line-height: ${(props) => LINE_HEIGHTS[props.$size]};
+  font-weight: 500;
+  font-family: ${FONT_FAMILY};
+  text-decoration: underline;
+  margin: 0;
+  padding: 0;
+
+  color: ${LINK_COLORS.light};
+
+  html[data-theme='dark'] & {
+    color: ${LINK_COLORS.dark};
+  }
+`;
+var Link = React.forwardRef(({ size = "md", href, ...props }, ref) => {
+  return /* @__PURE__ */ jsx(
+    StyledNextLink,
+    {
+      $size: size,
+      href,
+      style: props.style,
+      children: props.children
+    }
+  );
+});
+export {
+  Link
+};