@xyd-js/components 0.1.0-xyd.4 → 0.1.0-xyd.52

package/src/writer/Pre/Pre.tsx

@@ -1,13 +1,14 @@
 import React from "react"
 
-import {$pre} from "./Pre.styles"
+import * as cn from "./Pre.styles"
 
 export interface PreProps {
     children: React.ReactNode
+    className?: string
 }
 
-export function Pre({children}: PreProps) {
-    return <pre className={$pre.host}>
+export function Pre({ children, className }: PreProps) {
+    return <pre className={`${cn.PreHost} ${className || ""}`}>
         {children}
     </pre>
 }

package/src/writer/Steps/Steps.styles.tsx

@@ -1,7 +1,7 @@
 import {css} from "@linaria/core";
 
-export const $steps = {
-    host: css`
+export const StepsHost = css`
+    @layer defaults {
         padding-left: 0;
         list-style: none;
         counter-reset: ordered-listitem;
@@ -9,11 +9,13 @@ export const $steps = {
         display: flex;
         flex-direction: column;
         gap: 6px;
-    `,
-    li: css`
+    }
+`;
+
+export const StepsLi = css`
+    @layer defaults {
         padding-left: 32px;
         position: relative;
-        line-height: 1.5;
 
         &::after {
             position: absolute;
@@ -22,15 +24,15 @@ export const $steps = {
             counter-increment: ordered-listitem;
             content: counter(ordered-listitem);
 
-            background: #ececf1;
-            color: #353740;
-            font-size: 12px;
-            line-height: 24px;
-            font-weight: 500;
+            background: var(--xyd-steps-marker-bgcolor);
+            color: var(--xyd-steps-marker-color);
+            font-size: var(--xyd-font-size-xsmall);
+            line-height: var(--xyd-line-height-medium);
+            font-weight: var(--xyd-font-weight-medium);
             text-align: center;
             height: 24px;
             width: 24px;
             border-radius: 12px;
         }
-    `,
-}
+    }
+`;

package/src/writer/Steps/Steps.tsx

@@ -1,24 +1,53 @@
 import React from "react"
 
-import {$steps} from "./Steps.styles";
+import * as cn from "./Steps.styles";
 
+/**
+ * Props for the Steps component
+ */
 export interface StepsProps {
+    /** Content to be rendered inside the steps list */
     children: React.ReactNode;
-}
 
-export function Steps({children}: StepsProps) {
-    return <ol className={$steps.host}>
-        {children}
-    </ol>
+    /** Optional CSS class name to be applied to the steps container */
+    className?: string;
+}
 
+/**
+ * Steps component that renders a numbered list of steps or stages.
+ * Use this component to display a sequence of steps in a process or workflow.
+ * 
+ * @category Component
+ */
+export function Steps({ children, className }: StepsProps) {
+    return <xyd-steps>
+        <ol className={`${cn.StepsHost} ${className || ""}`}>
+            {children}
+        </ol>
+    </xyd-steps>
 }
 
+/**
+ * Props for the Steps.Item component
+ */
 export interface StepsItemProps {
+    /** Content to be rendered inside the step item */
     children: React.ReactNode;
+    
+    /** Optional CSS class name to be applied to the step item */
+    className?: string;
 }
 
-Steps.Item = function StepsItem({children}: StepsItemProps) {
-    return <li className={$steps.li}>
-        {children}
-    </li>
+/**
+ * Individual step item component that represents a single step in the sequence.
+ * This component should be used as a child of the Steps component.
+ * 
+ * @category Component
+ */
+Steps.Item = function StepsItem({ children, className }: StepsItemProps) {
+    return <xyd-steps-item>
+        <li className={`${cn.StepsLi} ${className || ""}`}>
+            {children}
+        </li>
+    </xyd-steps-item>
 }

package/src/writer/Table/Table.styles.tsx

@@ -1,39 +1,71 @@
 import {css} from "@linaria/core";
 
-const colors = {
-    primary: "#D1D5DB"
-}
 
-export const $table = {
-    host: css`
-        display: block;
-        overflow-x: scroll;
-
-        border-collapse: collapse;
-        border-radius: 3px;
+export default {
+    Host: css`
+        @layer defaults {
+            display: table;
+            width: 100%;
+            min-width: 640px; // Ensures table doesn't get too squished
+            border-collapse: separate;
+            border-spacing: 0;
+            border: 1px solid var(--xyd-table-border-color);
+            border-radius: 8px;
+            margin-top: 1rem;
+            overflow: hidden;
+        }
     `,
-    th: css`
-        padding: 0.5rem 1rem;
-        margin: 0;
-
-        font-weight: 600;
-        border-width: 1px;
-        border-color: ${colors.primary};
-        background: rgba(234, 238, 242, 0.5);
+    Thead: css`
+        @layer defaults {
+            background: var(--xyd-table-bgcolor);
+        }
+    `,
+    Tbody: css`
+        
+    `,
+    Th: css`
+        @layer defaults {
+            text-align: left;
+            font-weight: var(--xyd-font-weight-medium);
+            padding: 0.5rem 1rem;
+            white-space: nowrap;
+            vertical-align: middle;
+            color: var(--xyd-table-color);
+            border-bottom: 1px solid var(--xyd-table-border-color);
+            border-right: 1px solid var(--xyd-table-border-color);
+        }
     `,
-    tr: css`
-        padding: 0;
-        margin: 0;
-        border-top-width: 1px;
-        border-color: ${colors.primary};
+    Tr: css`
+        @layer defaults {
+            &:not(:last-child) {
+                border-bottom: 1px solid var(--xyd-table-border-color);
+            }
+        }
     `,
-    td: css`
-        padding: 0.5rem 1rem;
-        margin: 0;
+    Td: css`
+        @layer defaults {
+            padding: 0.5rem 1rem;
+            vertical-align: middle;
+            border-top: 1px solid var(--xyd-table-border-color);
+            border-right: 1px solid var(--xyd-table-border-color);
 
-        border-width: 1px;
-        border-color: ${colors.primary};
-    `
-}
+            @media (max-width: 768px) {
+                padding: 0.5rem;
+            }
+        }
+    `,
+    Cell: css`
+        @layer defaults {
+            display: flex;
+            align-items: baseline;
+            width: 100%;
+            gap: 0.5rem;
 
+            [part="child"] {
+                flex: 1;
+                text-align: right;
+            }
+        }
+    `
+} 
 

package/src/writer/Table/Table.tsx

@@ -1,45 +1,155 @@
 import React from "react"
 
-import {$table} from "./Table.styles";
+import cn from "./Table.styles";
 
+/**
+ * Props for the Table component
+ */
 export interface TableProps {
+    /** The content to be rendered inside the table */
+    children: React.ReactNode;
+
+    /** Optional CSS class name to be applied to the table */
+    className?: string;
+}
+
+/**
+ * A table component that provides a structured way to display tabular data.
+ * It supports custom styling through className prop and can contain various table elements.
+ * 
+ * @category Component
+ */
+export function Table({ children, className }: TableProps) {
+    return (
+        <table className={`${cn.Host} ${className || ''}`}>
+            {children}
+        </table>
+    );
+}
+
+/**
+ * Props for the TableHead component
+ */
+export interface TableHeadProps {
+    /** The content to be rendered inside the table header */
     children: React.ReactNode;
 }
 
-export function Table({children}: TableProps) {
-    return <table className={$table.host}>
+/**
+ * Represents the header section of a table.
+ * Use this component to group header content at the top of the table.
+ */
+Table.Head = function TableHead({ children }: TableHeadProps) {
+    return <thead className={cn.Thead}>
         {children}
-    </table>
+    </thead>
 }
 
+/**
+ * Props for the TableTh component
+ */
 export interface TableThProps {
+    /** The content to be rendered inside the table header cell */
     children: React.ReactNode;
+    
+    /** Whether the cell content should be right-aligned (for numeric values) */
+    numeric?: boolean;
 }
 
-Table.Th = function TableTh({children}: TableThProps) {
-    return <th className={$table.th}>
+/**
+ * Represents a header cell in the table.
+ * Use this component for column headers in the table.
+ */
+Table.Th = function TableTh({ children, numeric }: TableThProps) {
+    return <th className={`${cn.Th} ${numeric ? 'numeric' : ''}`}>
         {children}
     </th>
 }
 
+/**
+ * Props for the TableTr component
+ */
 export interface TableTrProps {
+    /** The content to be rendered inside the table row */
     children: React.ReactNode;
 }
 
-Table.Tr = function TableTr({children}: TableTrProps) {
-    return <tr className={$table.tr}>
+/**
+ * Represents a row in the table.
+ * Use this component to create rows in the table body or header.
+ */
+Table.Tr = function TableTr({ children }: TableTrProps) {
+    return <tr className={cn.Tr}>
         {children}
     </tr>
+}
+
+/**
+ * Props for the TableBody component
+ */
+export interface TableBodyProps {
+    /** The content to be rendered inside the table body */
+    children: React.ReactNode;
+}
 
+/**
+ * Represents the main content area of the table.
+ * Use this component to group the main content rows of the table.
+ */
+Table.Body = function TableBody({ children }: TableBodyProps) {
+    return <tbody className={cn.Tbody}>
+        {children}
+    </tbody>
 }
 
+/**
+ * Props for the TableTd component
+ */
 export interface TableTdProps {
+    /** The content to be rendered inside the table cell */
     children: React.ReactNode;
+
+    /** Whether the cell content should be right-aligned (for numeric values) */
+    numeric?: boolean;
+    
+    /** Whether the cell should have a muted appearance */
+    muted?: boolean;
 }
 
-Table.Td = function TableTd({children}: TableTdProps) {
-    return <td className={$table.td}>
+/**
+ * Represents a data cell in the table.
+ * Use this component for regular data cells in the table body.
+ */
+Table.Td = function TableTd({ children, numeric, muted }: TableTdProps) {
+    return <td className={`${cn.Td} ${numeric ? 'numeric' : ''} ${muted ? 'muted' : ''}`}>
         {children}
     </td>
+}
+
+/**
+ * Props for the TableCell component
+ */
+export interface TableCellProps {
+    /** The content to be rendered inside the table cell */
+    children: React.ReactNode;
+}
+
+/**
+ * A custom table cell component that wraps content in a div with specific styling.
+ * Use this component when you need a custom-styled cell with additional structure.
+ */
+Table.Cell = function TableCell({ children }: TableCellProps) {
+    return <xyd-table-cell className={cn.Cell}>
+        <div part="child">
+            {children}
+        </div>
+    </xyd-table-cell>
+}
 
-}
+/**
+ * Props for the TableModelCell component
+ */
+export interface TableModelCellProps {
+    /** The content to be rendered inside the model cell */
+    children: React.ReactNode;
+}

package/src/writer/Table/index.ts

@@ -1,10 +1,3 @@
 export {
     Table
 } from "./Table"
-
-export type {
-    TableProps,
-    TableThProps,
-    TableTrProps,
-    TableTdProps
-} from "./Table"

package/src/writer/Tabs/Tabs.styles.tsx

@@ -1,77 +1,70 @@
 import {css} from "@linaria/core";
 
-export const $sample = {
-    host: css`
+export const TabsSampleHost = css`
+    @layer defaults {
+        display: block;
         position: relative;
         max-width: 100%;
-    `,
-    buttons: css`
-        display: flex;
-        align-items: center;
-    `,
-    content: css`
-        margin-top: 16px;
-    `
-}
-
-export const $arrow = {
-    host: css`
-        padding: 8px;
-        background-color: #ffffff;
-        box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
-    `,
-    icon: css`
-        width: 16px;
-        height: 16px;
-    `
-}
-
-export const $scroller = {
-    host: css`
-        overflow-x: auto;
-        flex-grow: 1;
-    `,
-    container: css`
-        display: inline-flex;
-        gap: 4px;
-
-        border-radius: 8px;
-        background-color: #F3F4F6;
-        
-        padding: 4px;
-        margin-left: 4px;
-    `
-}
-
-export const $button = {
-    host: css`
-        padding: 0.5rem 1rem;
-
-        border-radius: 0.375rem;
-        font-size: 0.875rem;
-        line-height: 1.25rem;
-        font-weight: 500;
-        white-space: nowrap;
-
-        transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
-        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-        transition-duration: 300ms;
-
-        color: #6B7280;
-
-        &:hover {
-            color: #111827;
+
+        [part="buttons"] {
+            display: flex;
+            align-items: center;
+        }
+
+        [part="arrow"] {
+            padding: 8px;
+            background-color: var(--xyd-tabs-arrow-bgcolor);
+            box-shadow: 0 1px 2px 0 var(--xyd-tabs-shadow-color--active);
+        }
+
+        [part="arrow-icon"] {
+            width: 16px;
+            height: 16px;
         }
 
-        &[data-state="active"] {
-            color: #111827;
-            background-color: #ffffff;
-            box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+        [part="scroller"] {
+            overflow-x: auto;
+            flex-grow: 1;
         }
-    `,
-    $$active: css`
-        color: #111827;
-        background-color: #ffffff;
-        box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
-    `
-}
+
+        [part="scroller-container"] {
+            display: inline-flex;
+            gap: 4px;
+
+            border-radius: 8px;
+            background-color: var(--xyd-tabs-bgcolor);
+            
+            padding: 4px;
+            margin-left: 4px;
+        }
+
+        [part="button"] {
+            padding: 5px 16px;
+
+            border-radius: 0.375rem;
+            white-space: nowrap;
+
+            transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
+            transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+            transition-duration: 300ms;
+
+            color: var(--xyd-tabs-color);
+
+            &:hover {
+                color: var(--xyd-tabs-color--active);
+            }
+
+            &[data-state="active"] {
+                color: var(--xyd-tabs-color--active);
+                background-color: var(--xyd-tabs-bgcolor--active);
+                box-shadow: 0 1px 2px 0 var(--xyd-tabs-shadow-color--active);
+            }
+        }
+
+        [part="content"] {
+            margin-top: 16px;
+        }
+    }
+`;
+
+

package/src/writer/Tabs/Tabs.tsx

@@ -1,21 +1,17 @@
-import React, {useState, useRef, useEffect} from 'react'
-import * as RadixTabs from "@radix-ui/react-tabs"
-import {ChevronLeft, ChevronRight} from "lucide-react"
+import React, { useState, useRef, useEffect } from 'react'
+import {Tabs as RadixTabs} from "radix-ui"; // TODO: remove and use separation
+import { ChevronLeft, ChevronRight } from "lucide-react"
 
-import {
-    $sample,
-    $arrow,
-    $scroller,
-    $button
-} from "./Tabs.styles";
+import * as cn from "./Tabs.styles";
 
 export interface TabsProps {
     children: React.ReactNode;
     items: string[];
     tabIndex?: number;
+    className?: string;
 }
 
-export function Tabs({children, items, tabIndex}: TabsProps) {
+export function Tabs({ children, items, tabIndex, className }: TabsProps) {
     const [showLeftArrow, setShowLeftArrow] = useState(false)
     const [showRightArrow, setShowRightArrow] = useState(false)
     const scrollContainerRef = useRef<HTMLDivElement>(null)
@@ -24,7 +20,7 @@ export function Tabs({children, items, tabIndex}: TabsProps) {
 
     const handleScroll = () => {
         if (scrollContainerRef.current) {
-            const {scrollLeft, scrollWidth, clientWidth} = scrollContainerRef.current
+            const { scrollLeft, scrollWidth, clientWidth } = scrollContainerRef.current
             setShowLeftArrow(scrollLeft > 0)
             setShowRightArrow(scrollLeft < scrollWidth - clientWidth)
         }
@@ -39,33 +35,37 @@ export function Tabs({children, items, tabIndex}: TabsProps) {
     const scroll = (direction: 'left' | 'right') => {
         if (scrollContainerRef.current) {
             const scrollAmount = direction === 'left' ? -200 : 200
-            scrollContainerRef.current.scrollBy({left: scrollAmount, behavior: 'smooth'})
+            scrollContainerRef.current.scrollBy({ left: scrollAmount, behavior: 'smooth' })
         }
     }
 
     return (
         <RadixTabs.Root asChild value={value} onValueChange={setActiveTab}>
-            <div className={$sample.host}>
-                <div className={$sample.buttons}>
+            <xyd-tabs
+                className={`${cn.TabsSampleHost} ${className || ""}`}
+            >
+                <div part="buttons">
                     {showLeftArrow && (
                         <button
                             onClick={() => scroll('left')}
-                            className={$arrow.host}
+                            part="arrow"
                         >
-                            <ChevronLeft className={$arrow.icon}/>
+                            <ChevronLeft part="arrow-icon" />
                         </button>
                     )}
 
                     <div
                         ref={scrollContainerRef}
                         onScroll={handleScroll}
-                        className={$scroller.host}
+                        part="scroller"
                     >
-                        <div className={$scroller.container}>
+                        <div
+                            part="scroller-container"
+                        >
                             <RadixTabs.List>
-                                {items.map((item, index) => <TabsItem key={index} value={item}>
-                                        {item}
-                                    </TabsItem>
+                                {items.map((item, index) => <$TabsItem key={index} value={item}>
+                                    {item}
+                                </$TabsItem>
                                 )}
                             </RadixTabs.List>
                         </div>
@@ -74,31 +74,33 @@ export function Tabs({children, items, tabIndex}: TabsProps) {
                     {showRightArrow && (
                         <button
                             onClick={() => scroll('right')}
-                            className={$arrow.host}
+                            part="arrow"
                         >
-                            <ChevronRight className={$arrow.icon}/>
+                            <ChevronRight part="arrow-icon" />
                         </button>
                     )}
                 </div>
 
-                <div className={$sample.content}>
+                <div part="content">
                     {children}
                 </div>
-            </div>
+            </xyd-tabs>
         </RadixTabs.Root>
     )
 }
 
-function TabsItem({children, value}) {
+function $TabsItem({ children, value }) {
     return <RadixTabs.Trigger asChild value={value}>
-        <button className={`${$button.host}`}>
+        <button part="button">
             {children}
         </button>
     </RadixTabs.Trigger>
 }
 
-Tabs.Content = function TabsContent({children, value}) {
+Tabs.Content = function TabsContent({ children, value }) {
     return <RadixTabs.Content asChild value={value}>
-        {children}
+        <div>
+            {children}
+        </div>
     </RadixTabs.Content>
 }