Update components

Expose classname for extending components.

packages/base/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tesseract-design/viewfinder-base",
-  "version": "0.0.0",
+  "version": "0.0.1",
   "files": [
     "dist",
     "src"

packages/base/src/common.ts

@@ -1 +1,3 @@
-export type Span = 'narrow' | 'normal' | 'wide';
+export const AVAILABLE_SPANS = ['narrow', 'normal', 'wide'] as const;
+
+export type Span = typeof AVAILABLE_SPANS[number];

packages/base/src/plugin-tailwind.ts

@@ -9,7 +9,7 @@ export interface ViewfinderPluginOptions {
 	colorSidebarMenu?: string;
 }
 
-export const plugin = tailwindPlugin.withOptions<ViewfinderPluginOptions>(
+export const plugin = tailwindPlugin.withOptions<ViewfinderPluginOptions | undefined>(
 	({
 		baseWidth = 360 as const,
 		topbarHeight = '4rem' as const,

packages/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tesseract-design/viewfinder-react",
-  "version": "0.0.0",
+  "version": "0.0.1",
   "files": [
     "dist",
     "src"

packages/react/src/layouts/Basic/index.tsx

@@ -9,6 +9,7 @@ export interface RootProps extends React.HTMLProps<HTMLDivElement> {
 export const Root = React.forwardRef<HTMLDivElement, RootProps>(({
   children,
   topBarWidget,
+	className,
   ...etcProps
 }, ref) => (
   <>
@@ -16,7 +17,10 @@ export const Root = React.forwardRef<HTMLDivElement, RootProps>(({
     <div
       {...etcProps}
 			data-viewfinder="main"
-      className="box-border"
+      className={clsx(
+				'box-border',
+				className,
+			)}
       ref={ref}
     >
       {children}
@@ -33,14 +37,18 @@ export type ContentContainerProps = Omit<React.HTMLProps<HTMLDivElement>, 'span'
 export const ContentContainer = React.forwardRef<HTMLDivElement, ContentContainerProps>(({
   children,
   span = 'normal',
+	className,
+	...etcProps
 }, ref) => {
   return (
     <div
+			{...etcProps}
       className={clsx(
 				'px-8 box-border mx-auto w-full',
 				span === 'narrow' && 'max-w-screen-2xs',
 				span === 'normal' && 'max-w-screen-xs',
 				span === 'wide' && 'max-w-screen-sm',
+				className,
 			)}
       ref={ref}
     >

packages/react/src/layouts/LeftSidebar/index.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import clsx from 'clsx';
 
 export interface RootProps extends React.HTMLProps<HTMLDivElement> {
   sidebarBaseWidget?: React.ReactNode;
@@ -9,6 +10,7 @@ export const Root = React.forwardRef<HTMLDivElement, RootProps>(({
   children,
   topBarWidget,
   sidebarBaseWidget,
+	className,
   ...etcProps
 }, ref) => (
   <>
@@ -18,7 +20,10 @@ export const Root = React.forwardRef<HTMLDivElement, RootProps>(({
       {...etcProps}
       ref={ref}
 			data-viewfinder="main"
-      className="box-border md:pl-[calc(50%-(var(--base-width)*0.5))]"
+      className={clsx(
+				'box-border md:pl-[calc(50%-(var(--base-width)*0.5))]',
+				className,
+			)}
     >
       {children}
     </div>
@@ -29,9 +34,15 @@ export interface ContentContainerProps extends React.HTMLProps<HTMLDivElement> {
 
 export const MainContentContainer = React.forwardRef<HTMLDivElement, ContentContainerProps>(({
   children,
+	className,
+	...etcProps
 }, ref) => (
   <div
-    className="px-8 box-border w-full max-w-[calc(var(--base-width)*2)] mx-auto md:ml-0"
+		{...etcProps}
+    className={clsx(
+			'px-8 box-border w-full max-w-[calc(var(--base-width)*2)] mx-auto md:ml-0',
+			className,
+		)}
     ref={ref}
   >
     {children}
@@ -44,11 +55,15 @@ export interface SidebarMainContainerProps extends React.HTMLProps<HTMLDivElemen
 
 export const SidebarContentContainer = React.forwardRef<HTMLDivElement, SidebarMainContainerProps>(({
   children,
+	className,
   ...etcProps
 }, ref) => (
   <div
     {...etcProps}
-    className="w-full mx-auto px-8 box-border max-w-[calc(var(--base-width)*2)] md:w-[var(--base-width)] md:mr-0"
+    className={clsx(
+			'w-full mx-auto px-8 box-border max-w-[calc(var(--base-width)*2)] md:w-[var(--base-width)] md:mr-0',
+			className,
+		)}
     ref={ref}
   >
     {children}

packages/react/src/layouts/LeftSidebarWithMenu/index.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import clsx from 'clsx';
 
 export interface RootProps extends React.HTMLProps<HTMLDivElement> {
   sidebarBaseWidget?: React.ReactNode;
@@ -9,6 +10,7 @@ export const Root = React.forwardRef<HTMLDivElement, RootProps>(({
   children,
   topBarWidget,
   sidebarBaseWidget,
+	className,
   ...etcProps
 }, ref) => (
   <>
@@ -18,7 +20,10 @@ export const Root = React.forwardRef<HTMLDivElement, RootProps>(({
       {...etcProps}
       ref={ref}
 			data-viewfinder="main"
-      className="box-border pb-menu md:pb-0 md:pl-[calc(50%-(var(--base-width)*0.5))]"
+      className={clsx(
+				'box-border pb-menu md:pb-0 md:pl-[calc(50%-(var(--base-width)*0.5))]',
+				className,
+			)}
     >
       {children}
     </div>
@@ -29,9 +34,15 @@ export interface ContentContainerProps extends React.HTMLProps<HTMLDivElement> {
 
 export const MainContentContainer = React.forwardRef<HTMLDivElement, ContentContainerProps>(({
   children,
+	className,
+	...etcProps
 }, ref) => (
   <div
-    className="px-8 box-border w-full max-w-[calc(var(--base-width)*2)] mx-auto md:ml-0"
+		{...etcProps}
+    className={clsx(
+			'px-8 box-border w-full max-w-[calc(var(--base-width)*2)] mx-auto md:ml-0',
+			className,
+		)}
     ref={ref}
   >
     {children}
@@ -44,11 +55,15 @@ export interface SidebarMainContainerProps extends React.HTMLProps<HTMLDivElemen
 
 export const SidebarContentContainer = React.forwardRef<HTMLDivElement, SidebarMainContainerProps>(({
   children,
+	className,
   ...etcProps
 }, ref) => (
   <div
     {...etcProps}
-    className="px-8 box-border w-full max-w-[calc(var(--base-width)*2)] mx-auto md:max-w-none"
+    className={clsx(
+			'px-8 box-border w-full max-w-[calc(var(--base-width)*2)] mx-auto md:max-w-none',
+			className,
+		)}
     ref={ref}
   >
     {children}
@@ -61,11 +76,15 @@ export interface SidebarMenuItemIconProps extends React.HTMLProps<HTMLSpanElemen
 
 export const SidebarMenuItemIcon = React.forwardRef<HTMLSpanElement, SidebarMenuItemIconProps>(({
   children,
+	className,
   ...etcProps
 }, ref) => (
   <span
     {...etcProps}
-    className="block md:w-menu md:h-menu md:flex md:justify-center md:items-center"
+    className={clsx(
+			'block md:w-menu md:h-menu md:flex md:justify-center md:items-center',
+			className,
+		)}
     ref={ref}
   >
     {children}
@@ -76,11 +95,15 @@ SidebarMenuItemIcon.displayName = 'SidebarMenuItemIcon';
 
 export const SidebarMenuContainer = React.forwardRef<HTMLSpanElement, SidebarMainContainerProps>(({
   children,
+	className,
   ...etcProps
 }, ref) => (
   <span
     {...etcProps}
-    className="box-border flex flex-col justify-center items-center w-full text-center md:justify-start md:ml-auto md:text-left md:w-[var(--base-width)] md:flex-row"
+    className={clsx(
+			'box-border flex flex-col justify-center items-center w-full text-center md:justify-start md:ml-auto md:text-left md:w-[var(--base-width)] md:flex-row',
+			className,
+		)}
     ref={ref}
   >
     {children}
@@ -92,11 +115,15 @@ SidebarMenuContainer.displayName = 'SidebarMenuContainer';
 
 export const MoreSidebarMenuItemIcon = React.forwardRef<HTMLSpanElement, SidebarMenuItemIconProps>(({
   children,
+	className,
   ...etcProps
 }, ref) => (
   <span
     {...etcProps}
-    className="block mr-4 md:w-menu md:h-menu md:flex md:justify-center md:items-center md:mr-0"
+    className={clsx(
+			'block mr-4 md:w-menu md:h-menu md:flex md:justify-center md:items-center md:mr-0',
+			className,
+		)}
     ref={ref}
   >
     {children}
@@ -107,11 +134,15 @@ MoreSidebarMenuItemIcon.displayName = 'MoreSidebarMenuItemIcon';
 
 export const MoreSidebarMenuContainer = React.forwardRef<HTMLSpanElement, SidebarMainContainerProps>(({
   children,
+	className,
   ...etcProps
 }, ref) => (
   <span
     {...etcProps}
-    className="flex justify-start items-center w-[calc(var(--base-width)*2)] mx-auto px-8 text-left box-border md:mr-0 md:w-[var(--base-width)] md:pl-0"
+    className={clsx(
+			'flex justify-start items-center w-[calc(var(--base-width)*2)] mx-auto px-8 text-left box-border md:mr-0 md:w-[var(--base-width)] md:pl-0',
+			className,
+		)}
     ref={ref}
   >
     {children}

packages/react/src/layouts/RightSidebarStatic/index.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import clsx from 'clsx';
 
 export interface RootProps extends React.HTMLProps<HTMLDivElement> {
   sidebarBaseWidget?: React.ReactNode;
@@ -9,6 +10,7 @@ export const Root = React.forwardRef<HTMLDivElement, RootProps>(({
   children,
   topBarWidget,
   sidebarBaseWidget,
+	className,
   ...etcProps
 }, ref) => (
   <>
@@ -17,7 +19,10 @@ export const Root = React.forwardRef<HTMLDivElement, RootProps>(({
       {...etcProps}
       ref={ref}
 			data-viewfinder="main"
-      className="box-border md:pr-[calc(50%-(var(--base-width)*0.5))]"
+      className={clsx(
+				'box-border md:pr-[calc(50%-(var(--base-width)*0.5))]',
+				className,
+			)}
     >
       {children}
     </div>
@@ -32,9 +37,15 @@ export interface ContentContainerProps extends React.HTMLProps<HTMLDivElement> {
 
 export const MainContentContainer = React.forwardRef<HTMLDivElement, ContentContainerProps>(({
   children,
+	className,
+	...etcProps
 }, ref) => (
   <div
-    className="px-8 box-border w-full max-w-[calc(var(--base-width)*2)] mx-auto md:mr-0"
+		{...etcProps}
+    className={clsx(
+			'px-8 box-border w-full max-w-[calc(var(--base-width)*2)] mx-auto md:mr-0',
+			className,
+		)}
     ref={ref}
   >
     {children}
@@ -47,11 +58,15 @@ export interface SidebarMainContainerProps extends React.HTMLProps<HTMLDivElemen
 
 export const SidebarContentContainer = React.forwardRef<HTMLDivElement, SidebarMainContainerProps>(({
   children,
+	className,
   ...etcProps
 }, ref) => (
   <div
     {...etcProps}
-    className="px-8 box-border w-full max-w-[calc(var(--base-width)*2)] mx-auto md:ml-0 md:w-[var(--base-width)]"
+    className={clsx(
+			'px-8 box-border w-full max-w-[calc(var(--base-width)*2)] mx-auto md:ml-0 md:w-[var(--base-width)]',
+			className,
+		)}
     ref={ref}
   >
     {children}

packages/react/src/widgets/LeftSidebarBase/index.tsx

@@ -6,6 +6,7 @@ export interface LeftSidebarBaseProps extends React.HTMLProps<HTMLDivElement> {}
 export const LeftSidebarBase = React.forwardRef<HTMLDivElement, LeftSidebarBaseProps>(({
   children,
   open = false,
+	className,
   ...etcProps
 }, ref) => {
   return (
@@ -13,6 +14,7 @@ export const LeftSidebarBase = React.forwardRef<HTMLDivElement, LeftSidebarBaseP
       className={clsx(
 				'box-border fixed top-0 -left-full w-full h-full bg-sidebar md:left-0 md:w-[calc(50%-(var(--base-width)*0.5))] scrollbar-hidden',
 				open && 'left-0',
+				className,
 			)}
       {...etcProps}
       ref={ref}

packages/react/src/widgets/LeftSidebarWithMenuBase/index.tsx

@@ -34,6 +34,7 @@ export const LeftSidebarWithMenuBase = React.forwardRef<HTMLDivElement, LeftSide
   moreLinkComponent: MoreLinkComponent = LinkComponent,
   moreLinkItem,
   moreItemsOpen = false,
+	className,
   ...etcProps
 }, ref) => {
   const primarySidebarMenuItems = sidebarMenuItems.filter(s => !s.secondary)
@@ -58,8 +59,11 @@ export const LeftSidebarWithMenuBase = React.forwardRef<HTMLDivElement, LeftSide
 
   return (
     <div
-      className="left-sidebar-with-menu-base box-border overflow-hidden contents left-[calc(var(--base-width)*-1)] md:fixed md:top-0 md:left-0 md:w-[calc(50%-var(--base-width)*0.5)] md:h-full md:block"
-      {...etcProps}
+			{...etcProps}
+			className={clsx(
+				'left-sidebar-with-menu-base box-border overflow-hidden contents left-[calc(var(--base-width)*-1)] md:fixed md:top-0 md:left-0 md:w-[calc(50%-var(--base-width)*0.5)] md:h-full md:block',
+				className,
+			)}
       ref={ref}
     >
       <div

packages/react/src/widgets/RightSidebarBase/index.tsx

@@ -1,14 +1,19 @@
 import * as React from 'react';
+import clsx from 'clsx';
 
 export interface RightSidebarStaticBaseProps extends React.HTMLProps<HTMLDivElement> {}
 
 export const RightSidebarStaticBase = React.forwardRef<HTMLDivElement, RightSidebarStaticBaseProps>(({
   children,
+	className,
   ...etcProps
 }, ref) => (
   <div
-    className="box-border after:pb-[1px] after:-mt-[1px] after:box-border md:pr-[calc(50%-(var(--base-width)*0.5)] md:absolute md:top-0 md:right-0 md:h-full md:w-[calc(50%-(var(--base-width)*0.5))]"
-    {...etcProps}
+		{...etcProps}
+		className={clsx(
+			'box-border after:pb-[1px] after:-mt-[1px] after:box-border md:pr-[calc(50%-(var(--base-width)*0.5)] md:absolute md:top-0 md:right-0 md:h-full md:w-[calc(50%-(var(--base-width)*0.5))]',
+			className,
+		)}
     ref={ref}
   >
     <div

packages/react/src/widgets/TopBar/index.tsx

@@ -15,11 +15,13 @@ export const TopBar = React.forwardRef<HTMLDivElement, TopBarProps>(({
 	menuLink,
 	userLink,
 	children,
+	className,
 	...etcProps
 }, ref) => {
 	return (
 		<div className={clsx(
 			'fixed top-0 left-0 w-full z-[3] topbar',
+			className,
 		)}>
 			<div
 				{...etcProps}