@gsk_poc/untitled-ui-base 0.1.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Untitled UI
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,44 @@
+[![Untitled UI React](https://www.untitledui.com/react/untitled-ui-react-open-graph.jpg)](https://www.untitledui.com/react)
+
+# Untitled UI React
+
+[Untitled UI React](https://www.untitledui.com/react) is the world’s largest collection of open-source React components built with Tailwind CSS and React Aria. Everything you need to design and develop modern, beautiful interfaces—fast. Just copy, paste, and build.
+
+Built with React 19.1, Tailwind CSS v4.1, TypeScript 5.8, and React Aria, Untitled UI React components deliver modern performance, type safety, and maintainability.
+
+[Learn more](https://www.untitledui.com/react) • [Documentation](https://www.untitledui.com/react/docs/introduction) • [Figma](https://www.untitledui.com/figma) • [FAQs](https://www.untitledui.com/faqs)
+
+## Documentation
+
+Check out our documentation here → [untitledui.com/react/docs](https://www.untitledui.com/react/docs/introduction)
+
+## Installation
+
+Check out our installation guide here → [untitledui.com/react/docs/installation](https://www.untitledui.com/react/docs/installation)
+
+## Resources
+
+Untitled UI React is built on top of [Untitled UI Figma](https://www.untitledui.com/figma), the world's largest and most popular Figma UI kit and design system. Explore more:
+
+**[Untitled UI Figma:](https://www.untitledui.com/figma)** The world's largest Figma UI kit and design system.
+<br/>
+**[Untitled UI Icons:](https://www.untitledui.com/icons)** A clean, consistent, and neutral icon library crafted specifically for modern UI design.
+<br/>
+**[Untitled UI file icons:](https://www.untitledui.com/resources/file-icons)** Free file format icons, designed specifically for modern web and UI design.
+<br/>
+**[Untitled UI flag icons:](https://www.untitledui.com/resources/flag-icons)** Free country flag icons, designed specifically for modern web and UI design.
+<br/>
+**[Untitled UI avatars:](https://www.untitledui.com/resources/avatars)** Free placeholder user avatars and profile pictures to use in your projects.
+<br/>
+**[Untitled UI logos:](https://www.untitledui.com/resources/logos)** Free fictional company logos to use in your projects.
+
+## License
+
+Untitled UI React open-source components are licensed under the MIT license, which means you can use them for free in unlimited commercial projects.
+
+> [!NOTE]
+> This license applies only to the components included in this open-source repository. [Untitled UI React PRO](https://www.untitledui.com/react) includes hundreds more advanced UI components and page examples and is subject to a separate [license agreement](https://www.untitledui.com/license).
+
+[Untitled UI license agreement →](https://www.untitledui.com/license)
+
+[Frequently asked questions →](https://www.untitledui.com/faqs)

package/components/application/app-navigation/base-components/featured-cards.demo.tsx

@@ -0,0 +1,86 @@
+"use client";
+
+import type { ReactNode } from "react";
+import { Button } from "@/components/base/buttons/button";
+import { CloseButton } from "@/components/base/buttons/close-button";
+import { ProgressBarCircle } from "@/components/base/progress-indicators/progress-circles";
+import { ProgressBar } from "@/components/base/progress-indicators/progress-indicators";
+import { cx } from "@/utils/cx";
+
+interface FeaturedCardCommonProps {
+    title: string;
+    description: ReactNode;
+    confirmLabel: string;
+    className?: string;
+    onDismiss: () => void;
+    onConfirm: () => void;
+}
+
+export const FeaturedCardProgressBar = ({
+    title,
+    description,
+    confirmLabel,
+    progress,
+    className,
+    onDismiss,
+    onConfirm,
+}: FeaturedCardCommonProps & {
+    progress: number;
+}) => {
+    return (
+        <div className={cx("relative flex flex-col rounded-xl bg-secondary p-4", className)}>
+            <p className="text-sm font-semibold text-primary">{title}</p>
+            <p className="mt-1 text-sm text-tertiary">{description}</p>
+            <div className="absolute top-2 right-2">
+                <CloseButton onClick={onDismiss} size="sm" />
+            </div>
+            <div className="mt-4 flex">
+                <ProgressBar value={progress} />
+            </div>
+            <div className="mt-4 flex gap-3">
+                <Button onClick={onDismiss} color="link-gray" size="sm">
+                    Dismiss
+                </Button>
+                <Button onClick={onConfirm} color="link-color" size="sm">
+                    {confirmLabel}
+                </Button>
+            </div>
+        </div>
+    );
+};
+
+export const FeaturedCardProgressCircle = ({
+    title,
+    description,
+    confirmLabel,
+    progress,
+    className,
+    onDismiss,
+    onConfirm,
+}: FeaturedCardCommonProps & {
+    progress: number;
+}) => {
+    return (
+        <div className={cx("relative flex flex-col rounded-xl bg-secondary p-4", className)}>
+            <div className="w-16">
+                <ProgressBarCircle value={progress} size="xxs" />
+            </div>
+
+            <div className="absolute top-2 right-2">
+                <CloseButton onClick={onDismiss} size="sm" />
+            </div>
+            <div className="mt-3">
+                <p className="text-sm font-semibold text-primary">{title}</p>
+                <p className="mt-1 text-sm text-tertiary">{description}</p>
+            </div>
+            <div className="mt-4 flex gap-3">
+                <Button onClick={onDismiss} color="link-gray" size="sm">
+                    Dismiss
+                </Button>
+                <Button onClick={onConfirm} color="link-color" size="sm">
+                    {confirmLabel}
+                </Button>
+            </div>
+        </div>
+    );
+};

package/components/application/app-navigation/base-components/featured-cards.story.tsx

@@ -0,0 +1,49 @@
+"use client";
+
+import { withOverlayAware } from "@/components/internal/decorators";
+import * as FeatureCard from "./featured-cards.demo";
+
+export default {
+    title: "Application/Application navigation/Base components",
+    decorators: [
+        withOverlayAware((Story: any) => (
+            <div className="min-h-screen w-full bg-primary p-8">
+                <div className="w-68">
+                    <Story />
+                </div>
+            </div>
+        )),
+    ],
+};
+
+export const FeaturedCardProgressBar = () => (
+    <FeatureCard.FeaturedCardProgressBar
+        title="Used space"
+        description="Your team has used 80% of your available space. Need more?"
+        confirmLabel="Upgrade plan"
+        onConfirm={() => {}}
+        onDismiss={() => {}}
+        progress={85}
+    />
+);
+FeaturedCardProgressBar.parameters = {
+    design: {
+        desktop: "1157-99074",
+    },
+};
+
+export const FeaturedCardProgressCircle = () => (
+    <FeatureCard.FeaturedCardProgressCircle
+        title="Used space"
+        description="Your team has used 80% of your available space. Need more?"
+        confirmLabel="Upgrade plan"
+        onConfirm={() => {}}
+        onDismiss={() => {}}
+        progress={80}
+    />
+);
+FeaturedCardProgressCircle.parameters = {
+    design: {
+        desktop: "1157-99042",
+    },
+};

package/components/application/app-navigation/header-navigation.demo.tsx

@@ -0,0 +1,59 @@
+"use client";
+
+import { Zap } from "@untitledui/icons";
+import { HeaderNavigationBase } from "@/components/application/app-navigation/header-navigation";
+import { Button } from "@/components/base/buttons/button";
+
+export const HeaderNavigationSimpleDemo = () => (
+    <HeaderNavigationBase
+        items={[
+            { label: "Home", href: "/" },
+            {
+                label: "Dashboard",
+                href: "/dashboard",
+                items: [
+                    { label: "Overview", href: "#", current: true },
+                    { label: "Notifications", href: "#" },
+                    { label: "Analytics", href: "#" },
+                    { label: "Saved reports", href: "#" },
+                    { label: "Scheduled reports", href: "#" },
+                    { label: "User reports", href: "#" },
+                ],
+            },
+            { label: "Projects", href: "/projects" },
+            { label: "Tasks", href: "/tasks" },
+            { label: "Reporting", href: "/reporting" },
+            { label: "Users", href: "/users" },
+        ]}
+    />
+);
+
+export const HeaderNavigationDualTierDemo = () => (
+    <HeaderNavigationBase
+        items={[
+            { label: "Home", href: "/" },
+            {
+                label: "Dashboard",
+                href: "/dashboard",
+                current: true,
+                items: [
+                    { label: "Overview", href: "#", current: true },
+                    { label: "Notifications", href: "#" },
+                    { label: "Analytics", href: "#" },
+                    { label: "Saved reports", href: "#" },
+                    { label: "Scheduled reports", href: "#" },
+                    { label: "User reports", href: "#" },
+                ],
+            },
+            { label: "Projects", href: "/projects" },
+            { label: "Tasks", href: "/tasks" },
+            { label: "Reporting", href: "/reporting" },
+            { label: "Users", href: "/users" },
+        ]}
+        trailingContent={
+            <Button iconLeading={Zap} color="secondary" size="sm">
+                Upgrade now
+            </Button>
+        }
+    />
+);

package/components/application/app-navigation/header-navigation.story.tsx

@@ -0,0 +1,23 @@
+import { withOverlayAware } from "@/components/internal/decorators";
+import * as Demos from "./header-navigation.demo";
+
+export default {
+    title: "Application/Application navigation",
+    decorators: [withOverlayAware((Story, context) => <div className="min-h-screen w-full bg-primary">{Story(context, context)}</div>)],
+};
+
+export const HeaderNavigationSimpleDemo = () => <Demos.HeaderNavigationSimpleDemo />;
+HeaderNavigationSimpleDemo.storyName = "Header navigation simple";
+HeaderNavigationSimpleDemo.parameters = {
+    design: {
+        desktop: "1208-104342",
+    },
+};
+
+export const HeaderNavigationDualTierDemo = () => <Demos.HeaderNavigationDualTierDemo />;
+HeaderNavigationDualTierDemo.storyName = "Header navigation dual-tier";
+HeaderNavigationDualTierDemo.parameters = {
+    design: {
+        desktop: "1208-101427",
+    },
+};