@syscore/ui-library 1.15.1 → 1.15.2

package/client/components/ui/section-badge.tsx

@@ -0,0 +1,22 @@
+import { cn } from "@/lib/utils";
+
+function SectionBadge({
+  children,
+  className,
+}: {
+  children: React.ReactNode;
+  className?: string;
+}) {
+  return (
+    <span
+      className={cn(
+        "section-badge overline-large",
+        className,
+      )}
+    >
+      {children}
+    </span>
+  );
+}
+
+export { SectionBadge };

package/client/components/ui/typography.tsx

@@ -4,113 +4,113 @@ import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "@/lib/utils";
 
 const typographyVariants = cva("", {
-    variants: {
-        variant: {
-            "heading-large": "heading-large",
-            "heading-medium": "heading-medium",
-            "heading-small": "heading-small",
-            "heading-xsmall": "heading-xsmall",
-            "heading-xxsmall": "heading-xxsmall",
-            "body-large": "body-large",
-            "body-base": "body-base",
-            "body-small": "body-small",
-            "overline-large": "overline-large",
-            "overline-medium": "overline-medium",
-            "overline-small": "overline-small",
-            "number-large": "number-large",
-            "number-base": "number-base",
-        },
-    },
-    defaultVariants: {
-        variant: "body-base",
+  variants: {
+    variant: {
+      "heading-xlarge": "heading-xlarge",
+      "heading-large": "heading-large",
+      "heading-medium": "heading-medium",
+      "heading-small": "heading-small",
+      "heading-xsmall": "heading-xsmall",
+      "heading-xxsmall": "heading-xxsmall",
+      "body-large": "body-large",
+      "body-base": "body-base",
+      "body-small": "body-small",
+      "overline-large": "overline-large",
+      "overline-medium": "overline-medium",
+      "overline-small": "overline-small",
+      "number-large": "number-large",
+      "number-base": "number-base",
     },
+  },
+  defaultVariants: {
+    variant: "body-base",
+  },
 });
 
 type Variant = NonNullable<VariantProps<typeof typographyVariants>["variant"]>;
 
 const defaultElementMap: Record<Variant, React.ElementType> = {
-    "heading-large": "h1",
-    "heading-medium": "h2",
-    "heading-small": "h3",
-    "heading-xsmall": "h4",
-    "heading-xxsmall": "h5",
-    "body-large": "p",
-    "body-base": "p",
-    "body-small": "p",
-    "overline-large": "span",
-    "overline-medium": "span",
-    "overline-small": "span",
-    "number-large": "span",
-    "number-base": "span",
+  "heading-xlarge": "h1",
+  "heading-large": "h1",
+  "heading-medium": "h2",
+  "heading-small": "h3",
+  "heading-xsmall": "h4",
+  "heading-xxsmall": "h5",
+  "body-large": "p",
+  "body-base": "p",
+  "body-small": "p",
+  "overline-large": "span",
+  "overline-medium": "span",
+  "overline-small": "span",
+  "number-large": "span",
+  "number-base": "span",
 };
 
 interface TextProps extends React.HTMLAttributes<HTMLElement> {
-    variant?: Variant;
-    as?: React.ElementType;
+  variant?: Variant;
+  as?: React.ElementType;
 }
 
 const Text = React.forwardRef<HTMLElement, TextProps>(
-    ({ className, variant = "body-base", as, ...props }, ref) => {
-        const Component = as || defaultElementMap[variant];
+  ({ className, variant = "body-base", as, ...props }, ref) => {
+    const Component = as || defaultElementMap[variant];
 
-        return (
-            <Component
-                ref={ref}
-                className={cn(typographyVariants({ variant }), className)}
-                {...props}
-            />
-        );
-    }
+    return (
+      <Component
+        ref={ref}
+        className={cn(typographyVariants({ variant }), className)}
+        {...props}
+      />
+    );
+  },
 );
 Text.displayName = "Text";
 
 interface ListProps extends React.HTMLAttributes<HTMLUListElement> {}
 
 const List = React.forwardRef<HTMLUListElement, ListProps>(
-    ({ className, ...props }, ref) => {
-        return (
-            <ul
-                ref={ref}
-                className={cn("typography-list", className)}
-                {...props}
-            />
-        );
-    }
+  ({ className, ...props }, ref) => {
+    return (
+      <ul ref={ref} className={cn("typography-list", className)} {...props} />
+    );
+  },
 );
 List.displayName = "List";
 
 interface ListItemProps extends React.HTMLAttributes<HTMLLIElement> {
-    variant?: Variant;
+  variant?: Variant;
 }
 
 const ListItem = React.forwardRef<HTMLLIElement, ListItemProps>(
-    ({ className, variant = "body-base", children, ...props }, ref) => {
-        return (
-            <li
-                ref={ref}
-                className={cn("typography-list-item", className)}
-                {...props}
-            >
-                <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    width="4"
-                    height="4"
-                    viewBox="0 0 4 4"
-                    fill="none"
-                    className="typography-list-bullet"
-                    aria-hidden="true"
-                >
-                    <circle cx="2" cy="2" r="2" fill="#71747D" />
-                </svg>
-                <span className={cn(typographyVariants({ variant }))}>
-                    {children}
-                </span>
-            </li>
-        );
-    }
+  ({ className, variant = "body-base", children, ...props }, ref) => {
+    return (
+      <li
+        ref={ref}
+        className={cn("typography-list-item", className)}
+        {...props}
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="4"
+          height="4"
+          viewBox="0 0 4 4"
+          fill="none"
+          className="typography-list-bullet"
+          aria-hidden="true"
+        >
+          <circle cx="2" cy="2" r="2" fill="#71747D" />
+        </svg>
+        <span className={cn(typographyVariants({ variant }))}>{children}</span>
+      </li>
+    );
+  },
 );
 ListItem.displayName = "ListItem";
 
 export { Text, List, ListItem, typographyVariants, defaultElementMap };
-export type { TextProps, ListProps, ListItemProps, Variant as TypographyVariant };
-
+export type {
+  TextProps,
+  ListProps,
+  ListItemProps,
+  Variant as TypographyVariant,
+};

package/client/global.css

@@ -701,6 +701,9 @@ layer(base);
   --blur-lg: 12px;
   --blur-xl: 20px;
 
+  --radius-modal: 40px;
+  --modal-color: rgba(0, 0, 0, 0.08);
+
   --shadow-xs: 0 1px 2px 0 rgba(16, 24, 40, 0.05);
   --shadow-sm:
     0 1px 3px 0 rgba(16, 24, 40, 0.1), 0 1px 2px -1px rgba(16, 24, 40, 0.1);
@@ -1145,6 +1148,9 @@ body {
   position: relative;
   z-index: 10;
   font-weight: 600 !important;
+  display: flex;
+  align-items: center;
+  padding-top: 2px;
 }
 
 /* Accordion Styles */
@@ -1252,6 +1258,14 @@ body {
   color: hsl(var(--foreground));
 }
 
+/* Section Badge Styles */
+.section-badge {
+  display: inline-block;
+  border-radius: 0.375rem;
+  padding: 1rem;
+  margin-bottom: 2rem;
+}
+
 /* Label Styles */
 .label {
   color: var(--color-gray-600, #52545d);
@@ -6549,6 +6563,24 @@ body {
   margin-right: 1rem;
 }
 
+.heading-xlarge {
+  font-family: var(--font-ftmade);
+  font-size: 58px;
+  line-height: 64px;
+  letter-spacing: -0.58px;
+
+  &::before {
+    content: "";
+    margin-bottom: -0.2703em;
+    display: table;
+  }
+  &::after {
+    content: "";
+    margin-top: -0.1023em;
+    display: table;
+  }
+}
+
 .heading-large {
   font-family: var(--font-ftmade);
   font-size: 38px;

package/client/ui/SectionBadge.stories.tsx

@@ -0,0 +1,28 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { SectionBadge } from "../components/ui/section-badge";
+
+const meta = {
+  title: "Review/SectionBadge",
+  component: SectionBadge,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "centered",
+  },
+} satisfies Meta<typeof SectionBadge>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    children: "Section Title",
+  },
+};
+
+export const Styled: Story = {
+  args: {
+    children: "Custom Styled",
+    className: "bg-cyan-100 text-blue-500",
+  },
+};