@xyd-js/components 0.1.0-build.168

package/src/writer/Button/Button.styles.tsx

@@ -0,0 +1,149 @@
+import { css } from "@linaria/core";
+
+export const ButtonHost = css`
+    @layer defaults {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        border-radius: var(--xyd-button-border-radius, 6px);
+        border: 1px solid transparent;
+        font-weight: var(--xyd-font-weight-medium);
+        transition: all 0.2s ease;
+        cursor: pointer;
+        user-select: none;
+        white-space: nowrap;
+        gap: 8px;
+
+        &[data-size="xs"] {
+            height: 24px;
+            padding: 0 8px;
+            gap: 4px;
+
+            font-size: var(--xyd-font-size-xsmall);
+            line-height: var(--xyd-line-height-xsmall);
+
+            p {
+                font-size: var(--xyd-font-size-xsmall);
+                line-height: var(--xyd-line-height-xsmall);
+            }
+        }
+
+        &[data-size="sm"] {
+            height: 28px;
+            padding: 0 12px;
+            gap: 6px;
+
+            font-size: var(--xyd-font-size-xsmall);
+            line-height: var(--xyd-line-height-xsmall);
+
+            p {
+                font-size: var(--xyd-font-size-xsmall);
+                line-height: var(--xyd-line-height-xsmall);
+            }
+        }
+
+        &[data-size="md"] {
+            height: 36px;
+            padding: 0 16px;
+            gap: 8px;
+
+            font-size: var(--xyd-font-size-small);
+            line-height: var(--xyd-line-height-small);
+
+            p {
+                font-size: var(--xyd-font-size-small);
+                line-height: var(--xyd-line-height-small);
+            }
+        }
+
+        &[data-size="lg"] {
+            height: 44px;
+            padding: 0 20px;
+            gap: 10px;
+
+            font-size: var(--xyd-font-size-medium);
+            line-height: var(--xyd-line-height-medium);
+
+            p {
+                font-size: var(--xyd-font-size-medium);
+                line-height: var(--xyd-line-height-medium);
+            }
+        }
+
+        &[data-kind="primary"] {
+            background-color: var(--xyd-button-primary-bg);
+            color: var(--xyd-button-primary-color);
+            border-color: var(--xyd-button-primary-border);
+
+            &:hover:not(:disabled):not([aria-disabled="true"]) {
+                background-color: var(--xyd-button-primary-bg-hover);
+                border-color: var(--xyd-button-primary-border-hover);
+            }
+        }
+
+        &[data-kind="secondary"] {
+            background-color: var(--xyd-button-secondary-bg);
+            color: var(--xyd-button-secondary-color);
+            border-color: var(--xyd-button-secondary-border);
+
+            &:hover:not(:disabled):not([aria-disabled="true"]) {
+                background-color: var(--xyd-button-secondary-bg-hover);
+                border-color: var(--xyd-button-secondary-border-hover);
+            }
+        }
+
+        &[data-kind="tertiary"] {
+            background-color: var(--xyd-button-tertiary-bg);
+            color: var(--xyd-button-tertiary-color);
+            border-color: var(--xyd-button-tertiary-border);
+
+            &:hover:not(:disabled):not([aria-disabled="true"]) {
+                background-color: var(--xyd-button-tertiary-bg-hover);
+                border-color: var(--xyd-button-tertiary-border-hover);
+            }
+        }
+
+        &[data-theme="ghost"] {
+            background-color: unset;
+            border: unset;
+            padding: 0;
+
+            &:hover {
+                background-color: unset;
+                border: unset;
+                
+                svg {
+                    color: var(--dark60)
+                }
+            }
+
+            svg {
+                color: var(--dark48)
+            }
+        }
+
+        &:disabled,
+        &[aria-disabled="true"] {
+            opacity: 0.5;
+            cursor: not-allowed;
+        }
+
+        [part="content"] {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+
+        [part="icon"] {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            flex-shrink: 0;
+        }
+        &:not([data-theme="ghost"]) [part="icon"] svg {
+                width: 16px !important;
+                height: 16px !important;
+        }
+    }
+`;
+

package/src/writer/Button/Button.tsx

@@ -0,0 +1,82 @@
+import React from "react";
+
+import {Icon} from "../Icon/Icon"
+
+import * as cn from "./Button.styles";
+
+export interface ButtonProps {
+    children?: React.ReactNode;
+    kind?: "primary" | "secondary" | "tertiary" | undefined
+    theme?: "ghost";
+    size?: "xs" | "sm" | "md" | "lg";
+    className?: string;
+    onClick?: () => void;
+    disabled?: boolean;
+    icon?: React.ReactElement | string;
+    iconPosition?: "left" | "right";
+    href?: string;
+}
+
+export function Button({
+    children,
+    kind = "primary",
+    theme,
+    size = "md",
+    className,
+    onClick,
+    disabled = false,
+    icon,
+    iconPosition = "left",
+    href
+}: ButtonProps) {
+    let Component = href ? "a" : "button"
+
+    let hrefProps = {}
+
+    if (href && !disabled) {
+        hrefProps = {
+            href,
+            target: outsideLink(href) ? "_blank" : undefined,
+        }
+    }
+
+    if (theme === "ghost") {
+        kind = undefined as any
+    }
+
+    return (
+        <Component
+            className={`${cn.ButtonHost} ${className || ''}`}
+            data-button={true}
+            data-kind={kind}
+            data-size={size}
+            data-theme={theme}
+            data-has-icon={!!icon}
+            data-icon-position={iconPosition}
+            onClick={onClick}
+            disabled={disabled}
+            aria-disabled={disabled ? "true" : undefined}
+            {...hrefProps}
+        >
+            {icon && iconPosition === "left" && (
+                <span part="icon">
+                    {typeof icon === "string" ? <Icon name={icon} /> : icon}
+                </span>
+            )}
+            {
+                children ? <span part="content">
+                    {children}
+                </span> : null
+            }
+            {icon && iconPosition === "right" && (
+                <span part="icon">
+                    {typeof icon === "string" ? <Icon name={icon} /> : icon}
+                </span>
+            )}
+        </Component>
+    );
+}
+
+function outsideLink(href: string) {
+    return href.startsWith("http") || href.startsWith("//")
+}

package/src/writer/Button/index.ts

@@ -0,0 +1,2 @@
+export { Button } from "./Button";
+export type { ButtonProps } from "./Button";

package/src/writer/Callout/Callout.styles.tsx

@@ -0,0 +1,102 @@
+import { css } from "@linaria/core";
+
+export const CalloutHost = css`
+    @layer defaults {
+        display: inline-flex;
+        align-items: center;
+        position: relative;
+        width: 100%;
+        min-width: 275px;
+        padding: 8px 12px;
+        border-radius: 8px;
+        text-align: center;
+        border: 1px solid var(--xyd-callout-border-color);
+        background-color: var(--xyd-callout-bgcolor);
+        overflow: auto;
+        
+        code {
+            background: var(--white);
+        }
+        
+        /* Common callout styles */
+        &[data-kind] {
+            --callout-border-color: color-mix(in srgb, var(--callout-color) 30%, transparent);
+            --callout-bgcolor: color-mix(in srgb, var(--callout-color-muted) 10%, transparent);
+            border-color: var(--callout-border-color);
+            background-color: var(--callout-bgcolor);
+
+            p {
+                color: var(--callout-color-active);
+            }
+
+            a {
+                color: var(--text-primary);
+                text-decoration: underline;
+                text-decoration-color: var(--callout-color-active);
+                text-underline-offset: 4px;
+                text-decoration-thickness: 1px;
+                font-weight: var(--xyd-font-weight--semibold);
+
+                &:hover {
+                    text-decoration-thickness: 2px;
+                }
+            }
+
+            [part="icon"] {
+                svg {
+                    color: var(--callout-color-active);
+                    fill: var(--callout-color-active);
+                }
+            }
+        }
+        
+        &[data-kind="tip"] {
+            --callout-color: var(--xyd-text-color--success);
+            --callout-color-muted: var(--xyd-text-color--success--muted);
+            --callout-color-active: var(--xyd-text-color--success--active);
+        }
+        
+        &[data-kind="check"] {
+            --callout-color: var(--xyd-text-color--success);
+            --callout-color-muted: var(--xyd-text-color--success--muted);
+            --callout-color-active: var(--xyd-text-color--success--active);
+        }
+
+        &[data-kind="warning"] {
+            --callout-color: var(--xyd-text-color--warn);
+            --callout-color-muted: var(--xyd-text-color--warn--muted);
+            --callout-color-active: var(--xyd-text-color--warn--active);
+        }
+        
+        &[data-kind="note"] {
+            --callout-color: var(--xyd-text-color--info);
+            --callout-color-muted: var(--xyd-text-color--info--muted);
+            --callout-color-active: var(--xyd-text-color--info--active);
+        }
+        
+        &[data-kind="danger"] {
+            --callout-color: var(--xyd-text-color--error);
+            --callout-color-muted: var(--xyd-text-color--error--muted);
+            --callout-color-active: var(--xyd-text-color--error--active);
+        }
+
+        [part="icon"] {
+            display: inline-flex;
+            margin-right: 14px;
+            flex: 0 0 auto;
+            align-self: flex-start;
+            color: var(--xyd-callout-icon-color);
+            margin-top: 2px;
+        }
+        
+        [part="message"] {
+            color: var(--xyd-callout-message-color);
+            text-align: left;
+            flex: 1 1 auto;
+        }
+        
+        [part="message-body"] {
+        }
+        
+    }
+`;

package/src/writer/Callout/Callout.tsx

@@ -0,0 +1,166 @@
+import React from "react"
+
+import * as cn from "./Callout.styles";
+
+/**
+ * Props for the Callout component
+ */
+export interface CalloutProps {
+    /** Additional CSS class name to be applied to the callout */
+    className?: string;
+
+    /** Content to be displayed inside the callout */
+    children: React.ReactNode;
+
+    kind?: "warning" | "note" | "tip" | "check" | "danger"
+}
+
+/**
+ * A Callout component that displays important information or notices in a visually distinct way.
+ * It includes an info icon and a message area for content.
+ * 
+ * @category Component
+ */
+export function Callout({ className, children, kind }: CalloutProps) {
+    let icon
+
+    switch (kind) {
+        case "tip":
+            icon = <$BulbIcon />
+            break
+        case "check":
+            icon = <$CheckIcon />
+            break
+        case "warning":
+            icon = <$WarningIcon />
+            break
+        case "danger":
+            icon = <$DangerIcon />
+            break
+        case "note":
+            icon = <$NoteIcon />
+            break
+        default:
+            icon = <$IconInfo />
+            break
+    }
+
+    return <xyd-callout
+        data-kind={kind}
+        className={`${cn.CalloutHost} ${className || ''}`}
+    >
+        <div part="icon">
+            {icon}
+        </div>
+        <div part="message">
+            <div part="message-body">
+                {children}
+            </div>
+        </div>
+    </xyd-callout>
+}
+
+function $IconInfo() {
+    return <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="24"
+        height="24"
+        fill="currentColor"
+        viewBox="0 0 24 24"
+    >
+        <path d="M13 12a1 1 0 1 0-2 0v4a1 1 0 1 0 2 0v-4Zm-1-2.5A1.25 1.25 0 1 0 12 7a1.25 1.25 0 0 0 0 2.5Z" />
+        <path
+            fillRule="evenodd"
+            d="M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2ZM4 12a8 8 0 1 1 16 0 8 8 0 0 1-16 0Z"
+            clipRule="evenodd"
+        />
+    </svg>
+}
+
+function $BulbIcon() {
+    return <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+    >
+        <g
+            fill="none"
+            stroke="currentColor"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth={1.5}
+        >
+            <path d="M17.252 12.49c-.284 2.365-1.833 3.31-2.502 3.996c-.67.688-.55.825-.505 1.834a.916.916 0 0 1-.916.971h-2.658a.92.92 0 0 1-.917-.971c0-.99.092-1.22-.504-1.834c-.76-.76-2.548-1.833-2.548-4.784a5.307 5.307 0 1 1 10.55.788" />
+            <path d="M10.46 19.236v1.512c0 .413.23.752.513.752h2.053c.285 0 .514-.34.514-.752v-1.512m-2.32-10.54a2.227 2.227 0 0 0-2.226 2.227m10.338.981h1.834m-3.68-6.012l1.301-1.301M18.486 17l1.301 1.3M12 2.377V3.86m-6.76.73l1.292 1.302M4.24 18.3L5.532 17m-.864-5.096H2.835" />
+        </g>
+    </svg>
+}
+
+function $CheckIcon() {
+    return <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width={24}
+        height={24}
+        viewBox="0 0 24 24"
+    >
+        <path
+            fill="currentColor"
+            d="m9.55 18l-5.7-5.7l1.425-1.425L9.55 15.15l9.175-9.175L20.15 7.4z"
+        />
+    </svg>
+}
+
+function $WarningIcon() {
+    return <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width={24}
+        height={24}
+        viewBox="-2 -3 24 24"
+    >
+        <path
+            fill="currentColor"
+            d="m12.8 1.613l6.701 11.161c.963 1.603.49 3.712-1.057 4.71a3.2 3.2 0 0 1-1.743.516H3.298C1.477 18 0 16.47 0 14.581c0-.639.173-1.264.498-1.807L7.2 1.613C8.162.01 10.196-.481 11.743.517c.428.276.79.651 1.057 1.096m-2.22.839a1.077 1.077 0 0 0-1.514.365L2.365 13.98a1.17 1.17 0 0 0-.166.602c0 .63.492 1.14 1.1 1.14H16.7c.206 0 .407-.06.581-.172a1.164 1.164 0 0 0 .353-1.57L10.933 2.817a1.1 1.1 0 0 0-.352-.365zM10 14a1 1 0 1 1 0-2a1 1 0 0 1 0 2m0-9a1 1 0 0 1 1 1v4a1 1 0 0 1-2 0V6a1 1 0 0 1 1-1"
+        />
+    </svg>
+}
+
+function $DangerIcon() {
+    return <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width={24}
+        height={24}
+        viewBox="0 0 24 24"
+    >
+        <path
+            fill="none"
+            stroke="currentColor"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth={1.5}
+            d="M20.5 15.8V8.2a1.91 1.91 0 0 0-.944-1.645l-6.612-3.8a1.88 1.88 0 0 0-1.888 0l-6.612 3.8A1.9 1.9 0 0 0 3.5 8.2v7.602a1.91 1.91 0 0 0 .944 1.644l6.612 3.8a1.88 1.88 0 0 0 1.888 0l6.612-3.8A1.9 1.9 0 0 0 20.5 15.8M12 7.627v5.5m0 3.246v-.5"
+        />
+    </svg>
+}
+
+function $NoteIcon() {
+    return <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width={24}
+        height={24}
+        viewBox="0 0 24 24"
+    >
+        <g className="pin-outline">
+            <g
+                fill="currentColor"
+                fillRule="evenodd"
+                className="Vector"
+                clipRule="evenodd"
+            >
+                <path d="M12 16.143a1 1 0 0 1 1 1V21a1 1 0 0 1-2 0v-3.857a1 1 0 0 1 1-1" />
+                <path d="M8.447 4.223q0 .01.007.033c.05.17.12.344.198.51c.262.549.53 1.246.53 2.027v3.85c0 1.03-.442 1.97-1.109 2.666c-.49.512-.873.979-1.169 1.391c-.114.16-.133.269-.135.321a.25.25 0 0 0 .052.16c.089.126.352.319.83.319h4.985a1 1 0 1 1 0 2H7.652c-.987 0-1.93-.403-2.468-1.17c-.58-.827-.556-1.887.095-2.795c.355-.495.8-1.035 1.35-1.61c.358-.373.553-.833.553-1.282v-3.85c0-.335-.118-.71-.336-1.168a5.5 5.5 0 0 1-.31-.805c-.265-.898.081-1.68.664-2.168C7.736 2.204 8.455 2 9.124 2h3.512a1 1 0 1 1 0 2H9.124c-.303 0-.536.099-.64.186a.2.2 0 0 0-.037.037m-.005.007" />
+                <path d="M15.553 4.223a3.5 3.5 0 0 1-.206.543c-.26.549-.529 1.246-.529 2.027v3.85c0 1.03.442 1.97 1.109 2.666c.49.512.873.979 1.169 1.391c.114.16.133.269.135.321a.25.25 0 0 1-.052.16c-.089.126-.352.319-.83.319h-4.985a1 1 0 1 0 0 2h4.985c.986 0 1.928-.403 2.467-1.17c.58-.827.556-1.887-.095-2.795c-.355-.495-.8-1.035-1.35-1.61c-.358-.373-.553-.833-.553-1.282v-3.85c0-.335.118-.71.335-1.168c.116-.243.226-.515.311-.805c.265-.898-.081-1.68-.664-2.168C16.264 2.204 15.545 2 14.876 2h-3.512a1 1 0 1 0 0 2h3.512c.303 0 .536.099.64.186q.029.026.037.037m.005.007" />
+            </g>
+        </g>
+    </svg>
+}

package/src/writer/Callout/index.tsx

@@ -0,0 +1,3 @@
+export {Callout} from "./Callout"
+
+export type {CalloutProps} from "./Callout"

package/src/writer/Card/Card.styles.tsx

@@ -0,0 +1,110 @@
+import { css } from "@linaria/core"
+
+export const CardHost = css`
+    --card-shadow-atom-color: color-mix(
+        in srgb,
+        var(--black) 10%,
+        transparent 90%
+    );
+    --card-shadow: 0 1px 3px 0 var(--card-shadow-atom-color), 0 1px 2px -1px var(--card-shadow-atom-color);
+    --card-ring-offset-shadow: 0 0 var(--black);
+    --card-ring-shadow: 0 0 var(--black);
+
+    box-shadow: var(--card-ring-offset-shadow, 0 0 var(--black)), var(--card-ring-shadow, 0 0 var(--black)), var(--card-shadow);
+    /* box-shadow: 0 1px 2px 0 var(--xyd-card-shadow-color); */
+    
+    border-radius: 8px;
+    background-color: var(--xyd-card-bgcolor);
+    flex-direction: column;
+    display: flex;
+    overflow: hidden;
+    position: relative;
+    height: 100%;
+
+    /* &[data-shadow="md"] {
+        box-shadow: 0 5px 40px var(--xyd-card-shadow-color);
+    } */
+
+    &:hover {
+        --card-shadow: 0 10px 15px -3px var(--card-shadow-atom-color), 0 4px 6px -4px var(--card-shadow-atom-color);
+        box-shadow: var(--card-ring-offset-shadow, 0 0 var(--black)), var(--card-ring-shadow, 0 0 var(--black)), var(--card-shadow);
+    }
+
+    [part="image-container"] {
+        border-bottom: 2px solid var(--xyd-card-border-color);
+        height: 200px;
+        /* overflow: hidden; */
+        position: relative;
+        transition: transform 0.1s ease-in;
+
+        &:hover {
+            transform: scale(1.02);
+        }
+
+        [part="bg"] {
+            background-size: cover;
+            background-repeat: no-repeat;
+            position: relative;
+            height: 100%;
+        }
+
+        [part="bg-shadow"] {
+            --card-gradient-from: hsla(0, 0%, 4%, 0) var(--xyd-gradient-from-position);
+            --card-gradient-to: hsla(0, 0%, 4%, .2) var(--xyd-gradient-to-position);
+            --card-gradient-stops: var(--card-gradient-from), hsla(0, 0%, 4%, .1) var(--xyd-gradient-via-position), var(--card-gradient-to);
+            background-repeat: no-repeat;
+            background-size: cover;
+            height: 100%;
+            position: absolute;
+            top: 0;
+            width: 100%;
+            background-image: linear-gradient(to bottom, var(--card-gradient-stops));
+            pointer-events: none;
+        }
+        img {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+            margin-bottom: -4px;
+        }
+    }
+
+    [part="author-link"] {
+        --card-shadow: 0 4px 6px -1px var(--card-shadow-atom-color), 0 2px 4px -2px var(--card-shadow-atom-color);
+        --card-bg-opacity: 1;
+
+        box-shadow: var(--card-ring-offset-shadow, 0 0 var(--black)), var(--card-ring-shadow, 0 0 var(--black)), var(--card-shadow);
+        background-color: rgb(245 245 245 / var(--card-bg-opacity));
+        border-width: 1px;
+        border-color: var(--dark8);
+        border-radius: 9999px;
+        overflow: hidden;
+        width: 4rem;
+        height: 4rem;
+        z-index: 2;
+        left: 1.25rem;
+        bottom: -2rem;
+        position: absolute;
+
+        img {
+            width: 100%;
+            height: 100%;
+            display: block;
+            max-width: 100%;
+        }
+    }
+
+    [part="body"] {
+        /* padding: 16px; */
+
+        padding: 50px 1.25rem;
+
+        [part="header"] {
+            margin-right: 4px;
+            align-items: center;
+            justify-content: space-between;
+            /* margin-bottom: 12px; */
+            display: flex;
+        }
+    }
+`