@nationaldesignstudio/react 0.5.2 → 0.5.4

package/src/components/sections/two-column-section/two-column-section.stories.tsx

@@ -1,285 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { TwoColumnSection } from ".";
-
-const meta: Meta<typeof TwoColumnSection> = {
-	title: "Sections/TwoColumnSection",
-	component: TwoColumnSection,
-	parameters: {
-		layout: "fullscreen",
-	},
-	argTypes: {
-		colorScheme: {
-			control: "select",
-			options: ["dark", "light"],
-			description: "Color scheme",
-		},
-		title: {
-			control: "text",
-			description: "The title text",
-		},
-		lead: {
-			control: "text",
-			description: "Lead content (prominent)",
-		},
-	},
-} as Meta<typeof TwoColumnSection>;
-
-export default meta;
-type Story = StoryObj<typeof TwoColumnSection>;
-
-// =============================================================================
-// Playground
-// =============================================================================
-
-export const Playground: Story = {
-	render: (args) => <TwoColumnSection {...args} />,
-};
-Playground.args = {
-	colorScheme: "dark",
-	title: "US Tech Force",
-	lead: "The US Tech Force is recruiting an elite corps of engineers to build the next generation of government technology. Backed by the White House, Tech Force will tackle the most complex and large-scale civic and defense challenges of our era – from administering critical financial infrastructure at the Treasury Department to advancing cutting-edge programs at the Department of War – and everything in between.",
-	children: (
-		<>
-			<p>
-				Through a two-year program, participants will work in teams reporting
-				directly to agency leadership. In collaboration with leading technology
-				companies, participants will receive technical training, engage with
-				industry leaders, and work closely with senior managers from companies
-				partnering with the Tech Force.
-			</p>
-			<p>
-				Upon completing the program, engineers can seek employment with the
-				partnering private-sector companies for potential full-time roles –
-				demonstrating the value of combining civil service with technical
-				expertise.
-			</p>
-			<p>
-				If you are highly skilled in the areas of software engineering,
-				artificial intelligence, cybersecurity, data analytics, or technical
-				project management and want to build the future of American government
-				technology, join the Tech Force today.
-			</p>
-		</>
-	),
-};
-
-// =============================================================================
-// Variants
-// =============================================================================
-
-/**
- * Dark variant (default) - dark background with light text
- */
-export const DarkVariant: Story = {
-	render: () => (
-		<TwoColumnSection
-			colorScheme="dark"
-			title="US Tech Force"
-			lead="The US Tech Force is recruiting an elite corps of engineers to build the next generation of government technology."
-		>
-			<p>
-				Through a two-year program, participants will work in teams reporting
-				directly to agency leadership.
-			</p>
-			<p>
-				Upon completing the program, engineers can seek employment with the
-				partnering private-sector companies for potential full-time roles.
-			</p>
-		</TwoColumnSection>
-	),
-};
-
-/**
- * Light variant - light background with dark text
- */
-export const LightVariant: Story = {
-	render: () => (
-		<TwoColumnSection
-			colorScheme="light"
-			title="US Tech Force"
-			lead="The US Tech Force is recruiting an elite corps of engineers to build the next generation of government technology."
-		>
-			<p>
-				Through a two-year program, participants will work in teams reporting
-				directly to agency leadership.
-			</p>
-			<p>
-				Upon completing the program, engineers can seek employment with the
-				partnering private-sector companies for potential full-time roles.
-			</p>
-		</TwoColumnSection>
-	),
-};
-
-// =============================================================================
-// Responsive Variants
-// =============================================================================
-
-export const Desktop: Story = {
-	render: () => (
-		<TwoColumnSection
-			colorScheme="dark"
-			title="US Tech Force"
-			lead="The US Tech Force is recruiting an elite corps of engineers to build the next generation of government technology. Backed by the White House, Tech Force will tackle the most complex and large-scale civic and defense challenges of our era."
-		>
-			<p>
-				Through a two-year program, participants will work in teams reporting
-				directly to agency leadership. In collaboration with leading technology
-				companies, participants will receive technical training, engage with
-				industry leaders, and work closely with senior managers from companies
-				partnering with the Tech Force.
-			</p>
-			<p>
-				Upon completing the program, engineers can seek employment with the
-				partnering private-sector companies for potential full-time roles –
-				demonstrating the value of combining civil service with technical
-				expertise.
-			</p>
-			<p>
-				If you are highly skilled in the areas of software engineering,
-				artificial intelligence, cybersecurity, data analytics, or technical
-				project management and want to build the future of American government
-				technology, join the Tech Force today.
-			</p>
-		</TwoColumnSection>
-	),
-	globals: {
-		viewport: { value: "lg", isRotated: false },
-	},
-};
-
-export const Tablet: Story = {
-	render: () => (
-		<TwoColumnSection
-			colorScheme="dark"
-			title="US Tech Force"
-			lead="The US Tech Force is recruiting an elite corps of engineers to build the next generation of government technology. Backed by the White House, Tech Force will tackle the most complex and large-scale civic and defense challenges of our era."
-		>
-			<p>
-				Through a two-year program, participants will work in teams reporting
-				directly to agency leadership. In collaboration with leading technology
-				companies, participants will receive technical training, engage with
-				industry leaders, and work closely with senior managers from companies
-				partnering with the Tech Force.
-			</p>
-			<p>
-				Upon completing the program, engineers can seek employment with the
-				partnering private-sector companies for potential full-time roles –
-				demonstrating the value of combining civil service with technical
-				expertise.
-			</p>
-			<p>
-				If you are highly skilled in the areas of software engineering,
-				artificial intelligence, cybersecurity, data analytics, or technical
-				project management and want to build the future of American government
-				technology, join the Tech Force today.
-			</p>
-		</TwoColumnSection>
-	),
-	globals: {
-		viewport: { value: "md", isRotated: false },
-	},
-};
-
-export const Mobile: Story = {
-	render: () => (
-		<TwoColumnSection
-			colorScheme="dark"
-			title="US Tech Force"
-			lead="The US Tech Force is recruiting an elite corps of engineers to build the next generation of government technology. Backed by the White House, Tech Force will tackle the most complex and large-scale civic and defense challenges of our era."
-		>
-			<p>
-				Through a two-year program, participants will work in teams reporting
-				directly to agency leadership. In collaboration with leading technology
-				companies, participants will receive technical training, engage with
-				industry leaders, and work closely with senior managers from companies
-				partnering with the Tech Force.
-			</p>
-			<p>
-				Upon completing the program, engineers can seek employment with the
-				partnering private-sector companies for potential full-time roles –
-				demonstrating the value of combining civil service with technical
-				expertise.
-			</p>
-			<p>
-				If you are highly skilled in the areas of software engineering,
-				artificial intelligence, cybersecurity, data analytics, or technical
-				project management and want to build the future of American government
-				technology, join the Tech Force today.
-			</p>
-		</TwoColumnSection>
-	),
-	globals: {
-		viewport: { value: "sm", isRotated: false },
-	},
-};
-
-// =============================================================================
-// Content Variations
-// =============================================================================
-
-/**
- * Without lead content - just title and body
- */
-export const WithoutLead: Story = {
-	render: () => (
-		<TwoColumnSection colorScheme="dark" title="About the Program">
-			<p>
-				Through a two-year program, participants will work in teams reporting
-				directly to agency leadership. In collaboration with leading technology
-				companies, participants will receive technical training, engage with
-				industry leaders, and work closely with senior managers from companies
-				partnering with the Tech Force.
-			</p>
-			<p>
-				Upon completing the program, engineers can seek employment with the
-				partnering private-sector companies for potential full-time roles.
-			</p>
-		</TwoColumnSection>
-	),
-};
-
-/**
- * With rich lead content (ReactNode)
- */
-export const RichLeadContent: Story = {
-	render: () => (
-		<TwoColumnSection
-			colorScheme="dark"
-			title="Our Mission"
-			lead={
-				<>
-					<p>
-						The US Tech Force is recruiting an elite corps of engineers to build
-						the next generation of government technology.
-					</p>
-					<p>
-						Backed by the White House, Tech Force will tackle the most complex
-						and large-scale civic and defense challenges of our era.
-					</p>
-				</>
-			}
-		>
-			<p>
-				From administering critical financial infrastructure at the Treasury
-				Department to advancing cutting-edge programs at the Department of War –
-				and everything in between.
-			</p>
-		</TwoColumnSection>
-	),
-};
-
-/**
- * Short content example
- */
-export const ShortContent: Story = {
-	render: () => (
-		<TwoColumnSection
-			colorScheme="dark"
-			title="Join Us"
-			lead="Build the future of American government technology."
-		>
-			<p>Applications are now open for qualified engineers.</p>
-		</TwoColumnSection>
-	),
-};

package/src/components/shared/index.ts

@@ -1,5 +0,0 @@
-export {
-	FloatingArrowSvg,
-	type FloatingArrowSvgProps,
-	floatingArrowVariants,
-} from "./floating-arrow";

package/src/index.ts

@@ -1,293 +0,0 @@
-/**
- * @nationaldesignstudio/react
- * Design system components for React applications
- */
-
-// =============================================================================
-// Atoms
-// =============================================================================
-export type {
-	AccordionItemProps,
-	AccordionProps,
-} from "./components/atoms/accordion";
-export { Accordion, AccordionItem } from "./components/atoms/accordion";
-export type {
-	BackgroundGradientProps,
-	BackgroundImageProps,
-	BackgroundOverlayProps,
-	BackgroundProps,
-	BackgroundStreamProps,
-	BackgroundVideoProps,
-} from "./components/atoms/background";
-export {
-	Background,
-	BackgroundGradient,
-	BackgroundImage,
-	BackgroundOverlay,
-	BackgroundStream,
-	BackgroundVideo,
-	backgroundGradientVariants,
-	backgroundImageVariants,
-	backgroundOverlayVariants,
-	backgroundStreamVariants,
-	backgroundVariants,
-	backgroundVideoVariants,
-} from "./components/atoms/background";
-export type { ButtonProps, IconButtonProps } from "./components/atoms/button";
-export {
-	Button,
-	buttonVariants,
-	IconButton,
-	iconButtonVariants,
-} from "./components/atoms/button";
-export type {
-	InputGroupAddonProps,
-	InputGroupButtonProps,
-	InputGroupInputProps,
-	InputGroupProps,
-	InputGroupTextareaProps,
-	InputGroupTextProps,
-	InputProps,
-} from "./components/atoms/input";
-export {
-	Input,
-	InputGroup,
-	InputGroupAddon,
-	InputGroupButton,
-	InputGroupInput,
-	InputGroupText,
-	InputGroupTextarea,
-	inputGroupAddonVariants,
-	inputGroupVariants,
-	inputVariants,
-} from "./components/atoms/input";
-export type { NdstudioFooterProps } from "./components/atoms/ndstudio-footer";
-export { NdstudioFooter } from "./components/atoms/ndstudio-footer";
-export type { PagerControlProps } from "./components/atoms/pager-control";
-export {
-	PagerControl,
-	pagerControlVariants,
-} from "./components/atoms/pager-control";
-export type {
-	PopoverArrowProps,
-	PopoverBackdropProps,
-	PopoverCloseProps,
-	PopoverDescriptionProps,
-	PopoverPopupProps,
-	PopoverPortalProps,
-	PopoverPositionerProps,
-	PopoverProps,
-	PopoverRootProps,
-	PopoverTitleProps,
-	PopoverTriggerProps,
-} from "./components/atoms/popover";
-export {
-	Popover,
-	PopoverArrow,
-	PopoverBackdrop,
-	PopoverClose,
-	PopoverDescription,
-	PopoverParts,
-	PopoverPopup,
-	PopoverPortal,
-	PopoverPositioner,
-	PopoverRoot,
-	PopoverTitle,
-	PopoverTrigger,
-	popoverArrowVariants,
-	popoverPopupVariants,
-} from "./components/atoms/popover";
-export type {
-	SelectGroupLabelProps,
-	SelectGroupProps,
-	SelectOptionProps,
-	SelectPopupProps,
-	SelectProps,
-	SelectTriggerProps,
-} from "./components/atoms/select";
-export {
-	Select,
-	SelectGroup,
-	SelectGroupLabel,
-	SelectOption,
-	SelectPopup,
-	SelectRoot,
-	SelectTrigger,
-	selectOptionVariants,
-	selectPopupVariants,
-	selectTriggerVariants,
-} from "./components/atoms/select";
-export type {
-	TooltipArrowProps,
-	TooltipPopupProps,
-	TooltipPortalProps,
-	TooltipPositionerProps,
-	TooltipProps,
-	TooltipProviderProps,
-	TooltipRootProps,
-	TooltipTriggerProps,
-} from "./components/atoms/tooltip";
-export {
-	Tooltip,
-	TooltipArrow,
-	TooltipParts,
-	TooltipPopup,
-	TooltipPortal,
-	TooltipPositioner,
-	TooltipProvider,
-	TooltipRoot,
-	TooltipTrigger,
-	tooltipArrowVariants,
-	tooltipPopupVariants,
-} from "./components/atoms/tooltip";
-// =============================================================================
-// Dev Tools
-// =============================================================================
-export type { DevToolbarProps, GridOverlayProps } from "./components/dev-tools";
-export { DevToolbar, GridOverlay } from "./components/dev-tools";
-// =============================================================================
-// Organisms
-// =============================================================================
-export type {
-	CardActionsProps,
-	CardBodyProps,
-	CardContentProps,
-	CardDescriptionProps,
-	CardEyebrowProps,
-	CardImageProps,
-	CardProps,
-	CardTitleProps,
-} from "./components/organisms/card";
-export {
-	Card,
-	CardActions,
-	CardBody,
-	CardContent,
-	CardDescription,
-	CardEyebrow,
-	CardImage,
-	CardTitle,
-	cardVariants,
-} from "./components/organisms/card";
-export type {
-	NavbarActionsProps,
-	NavbarBrandProps,
-	NavbarLinkProps,
-	NavbarLinksProps,
-	NavbarMobileMenuButtonProps,
-	NavbarMobileMenuLinkProps,
-	NavbarMobileMenuProps,
-	NavbarProps,
-} from "./components/organisms/navbar";
-export {
-	Navbar,
-	NavbarActions,
-	NavbarBrand,
-	NavbarLink,
-	NavbarLinks,
-	NavbarMobileMenu,
-	NavbarMobileMenuButton,
-	NavbarMobileMenuLink,
-} from "./components/organisms/navbar";
-export type { USGovBannerProps } from "./components/organisms/us-gov-banner";
-export { USGovBanner } from "./components/organisms/us-gov-banner";
-// =============================================================================
-// Sections
-// =============================================================================
-export type { BannerProps } from "./components/sections/banner";
-export { Banner, bannerVariants } from "./components/sections/banner";
-export type { CardGridProps } from "./components/sections/card-grid";
-export { CardGrid, cardGridVariants } from "./components/sections/card-grid";
-export type { FaqSectionProps } from "./components/sections/faq-section";
-export { FaqSection } from "./components/sections/faq-section";
-export type {
-	HeroBackgroundImageProps,
-	HeroBackgroundStreamProps,
-	HeroBackgroundVideoProps,
-	HeroContentProps,
-	HeroGradientProps,
-	HeroHeaderProps,
-	HeroOverlayProps,
-	HeroProps,
-} from "./components/sections/hero";
-export {
-	DEFAULT_TITLE_TYPOGRAPHY,
-	Hero,
-	HeroBackground,
-	HeroBackgroundImage,
-	HeroBackgroundStream,
-	HeroBackgroundVideo,
-	HeroContent,
-	HeroGradient,
-	HeroHeader,
-	HeroOverlay,
-	heroContentVariants,
-	heroHeaderVariants,
-	heroVariants,
-} from "./components/sections/hero";
-export type {
-	ProseProps,
-	ProseSectionProps,
-} from "./components/sections/prose";
-export { Prose, ProseSection } from "./components/sections/prose";
-export type { QuoteBlockProps } from "./components/sections/quote-block";
-export {
-	QuoteBlock,
-	quoteBlockVariants,
-} from "./components/sections/quote-block";
-export type { RiverProps } from "./components/sections/river";
-export { River, riverVariants } from "./components/sections/river";
-export type { ToutProps } from "./components/sections/tout";
-export { Tout } from "./components/sections/tout";
-export type { TwoColumnSectionProps } from "./components/sections/two-column-section";
-export {
-	TwoColumnSection,
-	twoColumnSectionVariants,
-} from "./components/sections/two-column-section";
-// =============================================================================
-// Theme
-// =============================================================================
-export type {
-	ButtonTheme,
-	ColorToken,
-	ComponentTheme,
-	ComponentThemeColors,
-	ComponentThemeSpatial,
-	ComponentThemeSurface,
-	FontSizeToken,
-	RadiusToken,
-	SpacingToken,
-} from "./lib/theme";
-export {
-	buttonThemeToStyleVars,
-	FONT_SIZES,
-	fontSizeToClass,
-	responsiveTypographyClass,
-	themeToStyleVars,
-} from "./lib/theme";
-
-// =============================================================================
-// Utilities
-// =============================================================================
-export { cn } from "./lib/utils";
-
-// =============================================================================
-// Theme
-// =============================================================================
-export {
-	applyTheme,
-	createThemeStyle,
-	filterCSSVars,
-	getToken,
-	mergeCSSVars,
-	removeTheme,
-	type ThemeContextValue,
-	// Provider and hooks
-	ThemeProvider,
-	type ThemeProviderProps,
-	// Utilities
-	toCSSVars,
-	useCSSVars,
-	useTheme,
-	useThemeTokens,
-} from "./theme";

package/src/main.tsx

@@ -1,13 +0,0 @@
-import { StrictMode } from "react";
-import { createRoot } from "react-dom/client";
-import "./styles.css";
-import App from "./App.tsx";
-
-const rootElement = document.getElementById("root");
-if (rootElement) {
-	createRoot(rootElement).render(
-		<StrictMode>
-			<App />
-		</StrictMode>,
-	);
-}