tharaday 0.3.2 → 0.5.0

package/src/components/Select/Select.types.ts

@@ -9,10 +9,12 @@ export interface SelectOption {
 }
 
 export interface SelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElement>, 'size'> {
+  className?: string;
   size?: SelectSize;
   error?: boolean;
   label?: string;
   helperText?: string;
   options?: SelectOption[];
   children?: ReactNode;
+  fullWidth?: boolean;
 }

package/src/components/Skeleton/Skeleton.types.ts

@@ -3,6 +3,7 @@ import type { HTMLAttributes } from 'react';
 export type SkeletonVariant = 'text' | 'circular' | 'rectangular' | 'rounded';
 
 export interface SkeletonProps extends HTMLAttributes<HTMLDivElement> {
+  className?: string;
   variant?: SkeletonVariant;
   width?: string | number;
   height?: string | number;

package/src/components/Stepper/Step.tsx

@@ -12,6 +12,7 @@ export const Step = ({
   onStepClick,
   isLast,
   id,
+  className,
 }: StepProps) => {
   const isDisabled = Boolean(step.disabled);
   const StepContent: ElementType = isInteractive ? 'button' : 'div';
@@ -31,7 +32,7 @@ export const Step = ({
   };
 
   return (
-    <li className={clsx(styles.step, styles[status], isDisabled && styles.disabled)}>
+    <li className={clsx(styles.step, styles[status], isDisabled && styles.disabled, className)}>
       <StepContent
         id={id}
         type={isInteractive ? 'button' : undefined}

package/src/components/Stepper/Step.types.ts

@@ -9,6 +9,7 @@ export interface StepOptions {
 }
 
 export interface StepProps {
+  className?: string;
   step: StepOptions;
   index: number;
   status: StepperStatus;

package/src/components/Stepper/Stepper.types.ts

@@ -6,6 +6,7 @@ export type StepperOrientation = 'horizontal' | 'vertical';
 export type StepperSize = 'sm' | 'md' | 'lg';
 
 export interface StepperProps extends HTMLAttributes<HTMLOListElement> {
+  className?: string;
   steps: StepOptions[];
   currentStep?: number | string;
   orientation?: StepperOrientation;

package/src/components/Switch/Switch.types.ts

@@ -1,6 +1,7 @@
 import type { InputHTMLAttributes } from 'react';
 
 export interface SwitchProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> {
+  className?: string;
   label?: string;
   helperText?: string;
 }

package/src/components/Table/Table.types.ts

@@ -6,6 +6,7 @@ import type {
 } from 'react';
 
 export interface TableProps extends TableHTMLAttributes<HTMLTableElement> {
+  className?: string;
   striped?: boolean;
   hoverable?: boolean;
   dense?: boolean;

package/src/components/Text/Text.types.ts

@@ -26,6 +26,8 @@ export type TextColor =
   | 'info';
 
 export interface TextProps extends HTMLAttributes<HTMLElement> {
+  /** Additional class name */
+  className?: string;
   /** The content to display */
   children: ReactNode;
   /** The typographic style to apply */

package/src/components/Textarea/Textarea.module.css

@@ -1,8 +1,13 @@
 .wrapper {
-  display: flex;
+  display: inline-flex;
   flex-direction: column;
   gap: var(--ds-space-1);
+  width: fit-content;
+}
+
+.fullWidth {
   width: 100%;
+  display: flex;
 }
 
 .label {
@@ -14,7 +19,7 @@
 
 .textareaRoot {
   box-sizing: border-box;
-  width: 100%;
+  width: auto;
   font-family: var(--ds-font-family-base);
   border: 1px solid var(--ds-border-1);
   border-radius: var(--ds-radius-md);
@@ -27,6 +32,10 @@
   resize: vertical;
 }
 
+.fullWidth .textareaRoot {
+  width: 100%;
+}
+
 .textareaRoot:focus {
   outline: none;
   border-color: var(--ds-ring);

package/src/components/Textarea/Textarea.stories.tsx

@@ -21,6 +21,9 @@ const meta = {
     disabled: {
       control: 'boolean',
     },
+    fullWidth: {
+      control: 'boolean',
+    },
   },
 } satisfies Meta<typeof Textarea>;
 

package/src/components/Textarea/Textarea.tsx

@@ -9,6 +9,7 @@ export const Textarea = ({
   error,
   label,
   helperText,
+  fullWidth = false,
   className,
   id,
   rows = 4,
@@ -19,7 +20,7 @@ export const Textarea = ({
   const helperId = helperText ? `${componentId}-help` : undefined;
 
   return (
-    <div className={clsx(styles.wrapper, className)}>
+    <div className={clsx(styles.wrapper, fullWidth && styles.fullWidth, className)}>
       {label && (
         <label htmlFor={componentId} className={styles.label}>
           {label}

package/src/components/Textarea/Textarea.types.ts

@@ -3,9 +3,11 @@ import type { TextareaHTMLAttributes } from 'react';
 export type TextareaSize = 'sm' | 'md' | 'lg';
 
 export interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
+  className?: string;
   size?: TextareaSize;
   error?: boolean;
   label?: string;
   helperText?: string;
   rows?: number;
+  fullWidth?: boolean;
 }

package/src/layouts/AppLayout/AppLayout.tsx

@@ -1,3 +1,5 @@
+import clsx from 'clsx';
+
 import styles from './AppLayout.module.css';
 import type { AppLayoutProps } from './AppLayout.types.ts';
 import { Header } from '../../components/Header/Header.tsx';
@@ -11,7 +13,7 @@ import { NavBar } from '../../components/NavBar/NavBar.tsx';
  */
 export const AppLayout = ({
   headerLogo,
-  headerTitle = 'Tharaday',
+  headerTitle,
   user,
   navItems,
   activeNavId,
@@ -21,9 +23,11 @@ export const AppLayout = ({
   onLogout,
   onCreateAccount,
   onNavItemClick,
+  className,
+  maxWidth,
 }: AppLayoutProps) => {
   return (
-    <div className={styles.root}>
+    <div className={clsx(styles.root, className)}>
       <Header
         logo={headerLogo}
         title={headerTitle}
@@ -31,12 +35,14 @@ export const AppLayout = ({
         onLogin={onLogin}
         onLogout={onLogout}
         onCreateAccount={onCreateAccount}
+        maxWidth={maxWidth}
       />
       <NavBar
         items={navItems}
         activeId={activeNavId}
         actions={navActions}
         onItemClick={onNavItemClick}
+        maxWidth={maxWidth}
       />
       <main className={styles.main}>
         <div className={styles.container}>{children}</div>

package/src/layouts/AppLayout/AppLayout.types.ts

@@ -3,6 +3,14 @@ import type { ReactNode } from 'react';
 import type { NavBarItem } from '../../components/NavBar/NavBar.types.ts';
 
 export interface AppLayoutProps {
+  /**
+   * Additional class name for the layout root
+   */
+  className?: string;
+  /**
+   * Max width for header and navbar containers
+   */
+  maxWidth?: string | number;
   /**
    * Header logo element
    */

package/src/layouts/AuthLayout/AuthLayout.tsx

@@ -1,11 +1,13 @@
+import clsx from 'clsx';
+
 import styles from './AuthLayout.module.css';
 import type { AuthLayoutProps } from './AuthLayout.types.tsx';
 import { Box } from '../../components/Box/Box.tsx';
 import { Text } from '../../components/Text/Text.tsx';
 
-export const AuthLayout = ({ logo, title, description, children }: AuthLayoutProps) => {
+export const AuthLayout = ({ logo, title, description, children, className }: AuthLayoutProps) => {
   return (
-    <Box className={styles.root}>
+    <Box className={clsx(styles.root, className)}>
       <Box className={styles.card}>
         <Box className={styles.header}>
           {logo && <Box className={styles.logo}>{logo}</Box>}

package/src/layouts/AuthLayout/AuthLayout.types.tsx

@@ -1,6 +1,7 @@
 import type { ReactNode } from 'react';
 
 export interface AuthLayoutProps {
+  className?: string;
   logo?: ReactNode;
   title?: string;
   description?: string;

package/src/layouts/DashboardLayout/DashboardLayout.tsx

@@ -1,10 +1,12 @@
+import clsx from 'clsx';
+
 import styles from './DashboardLayout.module.css';
 import type { DashboardLayoutProps } from './DashboardLayout.types.tsx';
 import { Header } from '../../components/Header/Header.tsx';
 
 export const DashboardLayout = ({
   headerLogo,
-  headerTitle = 'Tharaday',
+  headerTitle,
   breadcrumbs,
   actions,
   stats,
@@ -13,9 +15,11 @@ export const DashboardLayout = ({
   onLogin,
   onLogout,
   onCreateAccount,
+  className,
+  maxWidth,
 }: DashboardLayoutProps) => {
   return (
-    <div className={styles.root}>
+    <div className={clsx(styles.root, className)}>
       <Header
         logo={headerLogo}
         title={headerTitle}
@@ -23,6 +27,7 @@ export const DashboardLayout = ({
         onLogin={onLogin}
         onLogout={onLogout}
         onCreateAccount={onCreateAccount}
+        maxWidth={maxWidth}
       />
       <main className={styles.main}>
         <div className={styles.container}>

package/src/layouts/DashboardLayout/DashboardLayout.types.tsx

@@ -1,6 +1,8 @@
 import type { ReactNode } from 'react';
 
 export interface DashboardLayoutProps {
+  className?: string;
+  maxWidth?: string | number;
   headerLogo?: ReactNode;
   headerTitle?: string;
   breadcrumbs?: ReactNode;

package/src/layouts/SettingsLayout/SettingsLayout.tsx

@@ -1,10 +1,12 @@
+import clsx from 'clsx';
+
 import styles from './SettingsLayout.module.css';
 import type { SettingsLayoutProps } from './SettingsLayout.types.tsx';
 import { Header } from '../../components/Header/Header.tsx';
 
 export const SettingsLayout = ({
   headerLogo,
-  headerTitle = 'Tharaday',
+  headerTitle,
   breadcrumbs,
   sidebar,
   children,
@@ -12,9 +14,11 @@ export const SettingsLayout = ({
   onLogin,
   onLogout,
   onCreateAccount,
+  className,
+  maxWidth,
 }: SettingsLayoutProps) => {
   return (
-    <div className={styles.root}>
+    <div className={clsx(styles.root, className)}>
       <Header
         logo={headerLogo}
         title={headerTitle}
@@ -22,6 +26,7 @@ export const SettingsLayout = ({
         onLogin={onLogin}
         onLogout={onLogout}
         onCreateAccount={onCreateAccount}
+        maxWidth={maxWidth}
       />
       <main className={styles.main}>
         <div className={styles.container}>

package/src/layouts/SettingsLayout/SettingsLayout.types.tsx

@@ -1,6 +1,8 @@
 import type { ReactNode } from 'react';
 
 export interface SettingsLayoutProps {
+  className?: string;
+  maxWidth?: string | number;
   headerLogo?: ReactNode;
   headerTitle?: string;
   breadcrumbs?: ReactNode;