@xyd-js/components 0.1.0-xyd.11 → 0.1.0-xyd.13

package/src/writer/NavLinks/NavLinks.styles.ts

@@ -1,32 +1,32 @@
 import {css} from "@linaria/core";
-import colors from "@livesession/design-system-colors";
 
 export const NavLinksHost = css`
-    display: flex;
-    padding-top: 2rem;
-    margin-top: 2rem;
-    margin-bottom: 2rem;
-    justify-content: space-between;
-    align-items: center;
-    border-top-width: 1px;
-    border-color: ${colors.dark32};
-`;
+    @layer defaults {
+        font-weight: var(--xyd-font-weight-semibold);
+        display: flex;
+        padding-top: 2rem;
+        margin-top: 2rem;
+        margin-bottom: 2rem;
+        justify-content: space-between;
+        align-items: center;
+        border-top-width: 1px;
+        border-color: var(--xyd-navlinks-border-color);
 
-export const NavLinksLink = css`
-    display: flex;
-    gap: 8px;
-    align-items: center;
-    font-size: 16px;
-    line-height: 1.5;
-    font-weight: 600;
-    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;
-    max-width: 50%;
-`;
+        [part="link"] {
+            display: flex;
+            gap: 8px;
+            align-items: center;
+            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;
+            max-width: 50%;
+        }
 
-export const NavLinksIcon = css`
-    display: inline;
-    height: 1.25rem;
-    flex-shrink: 0;
+        [part="icon"] {
+            display: inline;
+            height: 1.25rem;
+            flex-shrink: 0;
+        }
+    }
 `;
+

package/src/writer/NavLinks/NavLinks.tsx

@@ -1,14 +1,7 @@
 import React from "react"
-import {ArrowLeftIcon, ArrowRightIcon} from '@radix-ui/react-icons'
 
 import * as cn from "./NavLinks.styles";
 
-function Anchor({children, ...rest}) {
-    return <a {...rest}>
-        {children}
-    </a>
-}
-
 export interface NavLinksProps {
     prev?: {
         title: string
@@ -18,31 +11,85 @@ export interface NavLinksProps {
         title: string
         href: string
     }
+
+    as?: React.ElementType
+
+    className?: string
 }
 
-export function NavLinks(props: NavLinksProps) {
+export function NavLinks(
+    props: NavLinksProps
+) {
+    const Link = props.as || $Anchor
+
     return (
-        <div className={cn.NavLinksHost}>
+        <xyd-navlinks
+            className={`${cn.NavLinksHost} ${props.className || ""}`}
+        >
             {props.prev ? (
-                <Anchor
+                <Link
                     href={props.prev.href}
                     title={props.prev.title}
-                    className={cn.NavLinksLink}
+                    part="link"
                 >
-                    <ArrowLeftIcon className={cn.NavLinksIcon}/>
+                    <$ArrowLeftIcon part="icon"/>
                     {props.prev.title}
-                </Anchor>
+                </Link>
             ) : <div/>}
             {props.next && (
-                <Anchor
+                <Link
                     href={props.next.href}
                     title={props.next.title}
-                    className={cn.NavLinksLink}
+                    part="link"
                 >
                     {props.next.title}
-                    <ArrowRightIcon className={cn.NavLinksIcon}/>
-                </Anchor>
+                    <$ArrowRightIcon part="icon"/>
+                </Link>
             )}
-        </div>
+        </xyd-navlinks>
     )
 }
+
+
+function $Anchor({children, ...rest}) {
+    return <a {...rest}>
+        {children}
+    </a>
+}
+
+
+function $ArrowRightIcon(props: React.SVGProps<SVGSVGElement>) {
+    return <svg
+        width={15}
+        height={15}
+        viewBox="0 0 15 15"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        {...props}
+    >
+        <path
+            d="M8.14645 3.14645C8.34171 2.95118 8.65829 2.95118 8.85355 3.14645L12.8536 7.14645C13.0488 7.34171 13.0488 7.65829 12.8536 7.85355L8.85355 11.8536C8.65829 12.0488 8.34171 12.0488 8.14645 11.8536C7.95118 11.6583 7.95118 11.3417 8.14645 11.1464L11.2929 8H2.5C2.22386 8 2 7.77614 2 7.5C2 7.22386 2.22386 7 2.5 7H11.2929L8.14645 3.85355C7.95118 3.65829 7.95118 3.34171 8.14645 3.14645Z"
+            fill="currentColor"
+            fillRule="evenodd"
+            clipRule="evenodd"
+        />
+    </svg>
+}
+
+function $ArrowLeftIcon(props: React.SVGProps<SVGSVGElement>) {
+    return  <svg
+        width={15}
+        height={15}
+        viewBox="0 0 15 15"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        {...props}
+    >
+        <path
+            d="M6.85355 3.14645C7.04882 3.34171 7.04882 3.65829 6.85355 3.85355L3.70711 7H12.5C12.7761 7 13 7.22386 13 7.5C13 7.77614 12.7761 8 12.5 8H3.70711L6.85355 11.1464C7.04882 11.3417 7.04882 11.6583 6.85355 11.8536C6.65829 12.0488 6.34171 12.0488 6.14645 11.8536L2.14645 7.85355C1.95118 7.65829 1.95118 7.34171 2.14645 7.14645L6.14645 3.14645C6.34171 2.95118 6.65829 2.95118 6.85355 3.14645Z"
+            fill="currentColor"
+            fillRule="evenodd"
+            clipRule="evenodd"
+        />
+    </svg>
+}

package/src/writer/Pre/Pre.styles.tsx

@@ -1,11 +1,13 @@
 import {css} from "@linaria/core";
 
 export const PreHost = css`
-    margin-top: 0;
-    border-radius: 6px;
-    padding: 16px;
-    border: 0;
+    @layer defaults {
+        margin-top: 0;
+        border-radius: 6px;
+        padding: 16px;
+        border: 0;
 
-    background-color: rgb(246, 248, 250);
-    overflow: auto;
+        background-color: var(--xyd-pre-bgcolor);
+        overflow: auto;
+    }
 `;

package/src/writer/Pre/Pre.tsx

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

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

@@ -1,35 +1,38 @@
 import {css} from "@linaria/core";
 
 export const StepsHost = css`
-    padding-left: 0;
-    list-style: none;
-    counter-reset: ordered-listitem;
+    @layer defaults {
+        padding-left: 0;
+        list-style: none;
+        counter-reset: ordered-listitem;
 
-    display: flex;
-    flex-direction: column;
-    gap: 6px;
+        display: flex;
+        flex-direction: column;
+        gap: 6px;
+    }
 `;
 
 export const StepsLi = css`
-    padding-left: 32px;
-    position: relative;
-    line-height: 1.5;
+    @layer defaults {
+        padding-left: 32px;
+        position: relative;
 
-    &::after {
-        position: absolute;
-        top: 0;
-        left: 0;
-        counter-increment: ordered-listitem;
-        content: counter(ordered-listitem);
+        &::after {
+            position: absolute;
+            top: 0;
+            left: 0;
+            counter-increment: ordered-listitem;
+            content: counter(ordered-listitem);
 
-        background: #ececf1;
-        color: #353740;
-        font-size: 12px;
-        line-height: 24px;
-        font-weight: 500;
-        text-align: center;
-        height: 24px;
-        width: 24px;
-        border-radius: 12px;
+            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

@@ -2,22 +2,52 @@ import React from "react"
 
 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;
+
+    /** Optional CSS class name to be applied to the steps container */
+    className?: string;
 }
 
-export function Steps({children}: StepsProps) {
-    return <ol className={cn.StepsHost}>
-        {children}
-    </ol>
+/**
+ * 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={cn.StepsLi}>
-        {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,40 +1,71 @@
 import {css} from "@linaria/core";
 
-const colors = {
-    primary: "#D1D5DB"
-}
 
-export const TableHost = css`
-    display: block;
-    overflow-x: scroll;
+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;
+        }
+    `,
+    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`
+        @layer defaults {
+            &:not(:last-child) {
+                border-bottom: 1px solid var(--xyd-table-border-color);
+            }
+        }
+    `,
+    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-collapse: collapse;
-    border-radius: 3px;
-`;
-
-export const TableTh = css`
-    padding: 0.5rem 1rem;
-    margin: 0;
-
-    font-weight: 600;
-    border-width: 1px;
-    border-color: ${colors.primary};
-    background: rgba(234, 238, 242, 0.5);
-`;
-
-export const TableTr = css`
-    padding: 0;
-    margin: 0;
-    border-top-width: 1px;
-    border-color: ${colors.primary};
-`;
-
-export const TableTd = css`
-    padding: 0.5rem 1rem;
-    margin: 0;
-
-    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 * as cn 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={cn.TableHost}>
+/**
+ * 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={cn.TableTh}>
+/**
+ * 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={cn.TableTr}>
+/**
+ * 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={cn.TableTd}>
+/**
+ * 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,14 +1,3 @@
 export {
     Table
 } from "./Table"
-
-export type {
-    TableProps,
-    TableThProps,
-    TableTrProps,
-    TableTdProps
-} from "./Table"
-
-export {
-    TableV2
-} from "./TableV2"