Updates to core, ui

.changeset/curvy-queens-join.md

@@ -0,0 +1,16 @@
+---
+"@lightsparkdev/ui": patch
+---
+
+- update ClipboardTextField
+- Fix line height typography
+- Enable single defaultTypography argument for setDefaultTypography
+- Move CardForm description typography to theme
+- Add typed iconProps to Icon
+- add padding and outline props to TextInput
+- add button active and hover colors
+- add Inter font for uma auth sdk themes
+- add floating Drawer kind and adjust closeButton size 
+- add path props to most icons
+- add new icons
+- add icon object prop instead of icon name to Button

.changeset/many-humans-sneeze.md

@@ -0,0 +1,5 @@
+---
+"@lightsparkdev/core": patch
+---
+
+- add RequiredKeys type utility

apps/examples/ui-test-app/src/tests/toReactNodes.test.tsx

@@ -484,10 +484,7 @@ describe("toReactNodes", () => {
     } as const;
     const nodes = setDefaultReactNodesTypography(
       [stringNode, linkNode, textNode],
-      {
-        link: defaultTypography,
-        text: defaultTypography,
-      },
+      { default: defaultTypography },
     );
 
     expect(nodes).toEqual([

packages/core/src/utils/types.ts

@@ -45,3 +45,13 @@ export type PartialBy<T, K extends keyof T> = Omit<T, K> & Partial<Pick<T, K>>;
 
 /* Opposite of Partial - make all keys required with NonNullable values */
 export type Complete<T> = { [P in keyof T]-?: NonNullable<T[P]> };
+
+/**
+ * RequiredKeys utility extracts all the keys of T that are required.
+ * For each key K in T, it checks if Pick<T, K> extends {} (an empty object). If it does, that
+ * means K is optional; otherwise, it's required.
+ * The resulting type is a union of all required keys in T.
+ */
+export type RequiredKeys<T> = {
+  [K in keyof T]-?: Record<string, never> extends Pick<T, K> ? never : K;
+}[keyof T];

packages/ui/src/components/Badge.tsx

@@ -44,16 +44,9 @@ export function Badge({
     color: typographyProp?.color || (kind === "danger" ? "danger" : "text"),
   } as const;
 
-  const defaultTypographyMap = {
-    link: defaultTypography,
-    text: defaultTypography,
-    nextLink: defaultTypography,
-  };
-
-  const nodesWithTypography = setDefaultReactNodesTypography(
-    contentProp,
-    defaultTypographyMap,
-  );
+  const nodesWithTypography = setDefaultReactNodesTypography(contentProp, {
+    default: defaultTypography,
+  });
 
   const content = toReactNodes(nodesWithTypography);
 

packages/ui/src/components/Button.tsx

@@ -23,7 +23,6 @@ import { applyTypography } from "../styles/typography.js";
 import { type NewRoutesType } from "../types/index.js";
 import { select } from "../utils/emotion.js";
 import { Icon } from "./Icon/Icon.js";
-import { type IconName } from "./Icon/types.js";
 import { Loading, type LoadingKind } from "./Loading.js";
 import { Tooltip } from "./Tooltip.js";
 import { UnstyledButton } from "./UnstyledButton.js";
@@ -35,11 +34,14 @@ export const buttonKinds = [
   "secondary",
   "primary",
   "ghost",
+  "transparent",
   "green33",
   "purple55",
   "blue43",
   "blue39",
+  "linkLight",
   "danger",
+  "warning",
   "tertiary",
 ] as const;
 export type ButtonKind = (typeof buttonKinds)[number];
@@ -57,7 +59,9 @@ export type ButtonProps = {
   externalLink?: string | undefined;
   filename?: string | undefined;
   toParams?: RouteParams | undefined;
-  icon?: IconName | undefined;
+  icon?:
+    | Pick<ComponentProps<typeof Icon>, "name" | "color" | "iconProps">
+    | undefined;
   iconSide?: IconSide;
   loading?: boolean | undefined;
   loadingKind?: LoadingKind | undefined;
@@ -125,7 +129,9 @@ function resolveBackgroundColorKey(
     | "defaultBackgroundColor"
     | "defaultHoverBackgroundColor"
     | "defaultBorderColor"
-    | "defaultHoverBorderColor",
+    | "defaultHoverBorderColor"
+    | "defaultActiveBackgroundColor"
+    | "defaultActiveBorderColor",
 ) {
   const defaultBackgroundColorKey = theme.buttons.kinds[kind]?.[defaultKey];
   let backgroundColorKey = defaultBackgroundColorKey;
@@ -191,6 +197,16 @@ function resolveProps(props: ButtonProps, theme: Theme) {
     kind,
     "defaultHoverBorderColor",
   );
+  const activeBackgroundColor = resolveBackgroundColorKey(
+    theme,
+    kind,
+    "defaultActiveBackgroundColor",
+  );
+  const activeBorderColor = resolveBackgroundColorKey(
+    theme,
+    kind,
+    "defaultActiveBorderColor",
+  );
 
   const typography = {
     type:
@@ -215,6 +231,8 @@ function resolveProps(props: ButtonProps, theme: Theme) {
     borderColor,
     hoverBackgroundColor,
     hoverBorderColor,
+    activeBackgroundColor,
+    activeBorderColor,
   };
 }
 
@@ -238,6 +256,8 @@ export function Button(props: ButtonProps) {
     borderColor,
     hoverBackgroundColor,
     hoverBorderColor,
+    activeBackgroundColor,
+    activeBorderColor,
     iconSide = "left",
     loading = false,
     loadingKind = "primary",
@@ -275,7 +295,7 @@ export function Button(props: ButtonProps) {
         typography={typography}
         kind={kind}
       >
-        <Icon name={icon} width={iconSize} color={typography.color} />
+        <Icon {...icon} width={iconSize} color={typography.color} />
       </ButtonIcon>
     );
   }
@@ -329,6 +349,8 @@ export function Button(props: ButtonProps) {
     borderColor,
     hoverBackgroundColor,
     hoverBorderColor,
+    activeBackgroundColor,
+    activeBorderColor,
     isRound: isSingleCharRoundButton,
     isLoading: loading,
     disabled: disabled || loading,
@@ -380,6 +402,8 @@ type StyledButtonProps = {
   borderColor: string;
   hoverBackgroundColor: string;
   hoverBorderColor: string;
+  activeBackgroundColor: string;
+  activeBorderColor: string;
   css: { marginTop: string | undefined; marginLeft: string | undefined };
   borderRadius: ButtonBorderRadius;
   iconSide: IconSide;
@@ -402,6 +426,8 @@ const buttonStyle = ({
   backgroundColor,
   hoverBackgroundColor,
   hoverBorderColor,
+  activeBackgroundColor,
+  activeBorderColor,
 }: StyledButtonProps & { theme: Theme }) => {
   const borderColor = borderColorProp || backgroundColor;
 
@@ -452,6 +478,11 @@ const buttonStyle = ({
         background-color: ${hoverBackgroundColor};
         border-color: ${hoverBorderColor};
       }
+
+      &:active {
+        background-color: ${activeBackgroundColor};
+        border-color: ${activeBorderColor};
+      }
     }
   `;
 };

packages/ui/src/components/CardForm/CardForm.tsx

@@ -50,44 +50,7 @@ import { TextInputHalfRow } from "../TextInput.js";
 import { ToggleContainer } from "../Toggle.js";
 import { Headline } from "../typography/Headline.js";
 
-const descriptionTypography = {
-  primary: {
-    text: {
-      type: "Body Strong",
-      size: "Small",
-      color: "mcNeutral",
-    },
-    link: {
-      type: "Body Strong",
-      size: "Small",
-      color: "text",
-    },
-  },
-  secondary: {
-    text: {
-      type: "Body Strong",
-      size: "Small",
-      color: "mcNeutral",
-    },
-    link: {
-      type: "Body Strong",
-      size: "Small",
-      color: "text",
-    },
-  },
-  tertiary: {
-    text: {
-      type: "Body",
-      size: "Large",
-      color: "mcNeutral",
-    },
-    link: {
-      type: "Body",
-      size: "Large",
-      color: "text",
-    },
-  },
-} as const;
+type BelowCardFormContentGap = 0 | 16;
 
 type CardFormProps = {
   children?: ReactNode;
@@ -105,6 +68,7 @@ type CardFormProps = {
   textAlign?: CardFormTextAlign;
   shadow?: CardFormShadow;
   belowFormContent?: ToReactNodesArgs | undefined;
+  belowFormContentGap?: BelowCardFormContentGap | undefined;
 };
 
 type ResolvePropsArgs = {
@@ -159,6 +123,12 @@ function resolveProps(args: ResolvePropsArgs, theme: Theme) {
     "smBorderWidth",
     theme,
   );
+  const defaultDescriptionTypographyMap = resolveCardFormProp(
+    undefined,
+    args.kind,
+    "defaultDescriptionTypographyMap",
+    theme,
+  );
 
   const props = {
     paddingY,
@@ -171,6 +141,7 @@ function resolveProps(args: ResolvePropsArgs, theme: Theme) {
     backgroundColor,
     smBackgroundColor,
     smBorderWidth,
+    defaultDescriptionTypographyMap,
   };
 
   return props;
@@ -192,6 +163,7 @@ export function CardForm({
   shadow: shadowProp,
   textAlign: textAlignProp,
   belowFormContent,
+  belowFormContentGap = 0,
 }: CardFormProps) {
   const theme = useTheme();
   const {
@@ -205,6 +177,7 @@ export function CardForm({
     backgroundColor,
     smBackgroundColor,
     smBorderWidth,
+    defaultDescriptionTypographyMap,
   } = resolveProps(
     { kind, textAlign: textAlignProp, shadow: shadowProp },
     theme,
@@ -224,7 +197,10 @@ export function CardForm({
   );
 
   const formattedDescription = description
-    ? toReactNodesWithTypographyMap(description, descriptionTypography[kind])
+    ? toReactNodesWithTypographyMap(
+        description,
+        defaultDescriptionTypographyMap,
+      )
     : null;
 
   const belowFormContentNodes = belowFormContent
@@ -277,7 +253,9 @@ export function CardForm({
           {content}
         </StyledCardForm>
       )}
-      <BelowCardFormContent>{belowFormContentNodes}</BelowCardFormContent>
+      <BelowCardFormContent gap={belowFormContentGap}>
+        {belowFormContentNodes}
+      </BelowCardFormContent>
     </CardFormContainer>
   );
 }
@@ -297,9 +275,17 @@ const CardFormContent = styled.div`
   align-self: center;
 `;
 
-const BelowCardFormContent = styled.div`
+type BelowCardFormContentProps = {
+  gap: BelowCardFormContentGap;
+};
+
+const BelowCardFormContent = styled.div<BelowCardFormContentProps>`
   text-align: center;
   margin-top: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: ${({ gap }) => gap}px;
 
   ${bp.sm(`
     margin-bottom: 32px;

packages/ui/src/components/Checkbox.tsx

@@ -34,16 +34,9 @@ export function Checkbox({
     color: typographyProp?.color || "text",
   } as const;
 
-  const defaultTypographyMap = {
-    link: defaultTypography,
-    text: defaultTypography,
-    nextLink: defaultTypography,
-  };
-
-  const nodesWithTypography = setDefaultReactNodesTypography(
-    label,
-    defaultTypographyMap,
-  );
+  const nodesWithTypography = setDefaultReactNodesTypography(label, {
+    default: defaultTypography,
+  });
 
   const content = toReactNodes(nodesWithTypography);