willa-workspace 0.0.3-alpha.2739b3e

package/packages/willa-layout/src/components/Separator/index.tsx

@@ -0,0 +1,61 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import classNames from "classnames";
+
+export type SeparatorOrientation = "horizontal" | "vertical";
+export type SeparatorSize = "sm" | "md" | "lg";
+export type SeparatorAlign = "start" | "center" | "end";
+export type SeparatorVariant = "solid" | "dashed" | "dotted";
+
+export type SeparatorProps = {
+  orientation?: SeparatorOrientation;
+  size?: SeparatorSize;
+  align?: SeparatorAlign;
+  variant?: SeparatorVariant;
+  plain?: boolean;
+  decorative?: boolean;
+  className?: string;
+  children?: ReactNode;
+} & Omit<HTMLAttributes<HTMLDivElement>, "children">;
+
+export function Separator(props: SeparatorProps) {
+  const {
+    orientation = "horizontal",
+    size = "md",
+    align = "center",
+    variant = "solid",
+    plain = false,
+    decorative = true,
+    className,
+    children,
+    ...separatorProps
+  } = props;
+  const hasLabel = orientation === "horizontal" && Boolean(children);
+
+  return (
+    <div
+      {...separatorProps}
+      className={classNames(
+        "willa-separator",
+        `willa-separator--${orientation}`,
+        `willa-separator--${size}`,
+        `willa-separator--${variant}`,
+        plain && "willa-separator--plain",
+        hasLabel && `willa-separator--${align}`,
+        hasLabel && "willa-separator--labeled",
+        className,
+      )}
+      role={decorative ? "presentation" : "separator"}
+      aria-orientation={decorative ? undefined : orientation}
+    >
+      {hasLabel ? (
+        <>
+          <span className="willa-separator-line" />
+          <span className="willa-separator-label">{children}</span>
+          <span className="willa-separator-line" />
+        </>
+      ) : null}
+    </div>
+  );
+}
+
+Separator.displayName = "Separator";

package/packages/willa-layout/src/components/SidebarLayout/index.css

@@ -0,0 +1,43 @@
+.willa-sidebar-layout {
+  display: grid;
+  box-sizing: border-box;
+  width: 100%;
+  min-width: 0;
+  gap: var(--willa-sidebar-layout-gap);
+  grid-template-columns:
+    var(--willa-sidebar-layout-sidebar-width)
+    minmax(var(--willa-sidebar-layout-min-content-width), 1fr);
+  color: var(--willa-text);
+  font-family: var(--willa-body-font);
+}
+
+.willa-sidebar-layout--right {
+  grid-template-columns:
+    minmax(var(--willa-sidebar-layout-min-content-width), 1fr)
+    var(--willa-sidebar-layout-sidebar-width);
+}
+
+.willa-sidebar-layout-sidebar,
+.willa-sidebar-layout-main {
+  min-width: 0;
+}
+
+.willa-sidebar-layout--right .willa-sidebar-layout-sidebar {
+  order: 2;
+}
+
+.willa-sidebar-layout--right .willa-sidebar-layout-main {
+  order: 1;
+}
+
+@media (max-width: 900px) {
+  .willa-sidebar-layout--collapse-tablet,
+  .willa-sidebar-layout--right.willa-sidebar-layout--collapse-tablet {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .willa-sidebar-layout--collapse-tablet .willa-sidebar-layout-sidebar,
+  .willa-sidebar-layout--collapse-tablet .willa-sidebar-layout-main {
+    order: initial;
+  }
+}

package/packages/willa-layout/src/components/SidebarLayout/index.tsx

@@ -0,0 +1,73 @@
+import type { CSSProperties, HTMLAttributes, ReactNode } from "react";
+import classNames from "classnames";
+
+export type SidebarLayoutSide = "left" | "right";
+export type SidebarLayoutGapPreset = "none" | "sm" | "md" | "lg";
+export type SidebarLayoutGap = SidebarLayoutGapPreset | (string & {});
+
+export type SidebarLayoutProps = {
+  sidebar: ReactNode;
+  side?: SidebarLayoutSide;
+  sidebarWidth?: string;
+  gap?: SidebarLayoutGap;
+  minContentWidth?: string;
+  collapseBelow?: "none" | "tablet";
+  className?: string;
+  children?: ReactNode;
+} & Omit<HTMLAttributes<HTMLDivElement>, "children">;
+
+export function SidebarLayout(props: SidebarLayoutProps) {
+  const {
+    sidebar,
+    side = "left",
+    sidebarWidth = "16rem",
+    gap = "md",
+    minContentWidth = "0",
+    collapseBelow = "tablet",
+    className,
+    children,
+    style,
+    ...layoutProps
+  } = props;
+  const layoutStyle = {
+    "--willa-sidebar-layout-sidebar-width": sidebarWidth,
+    "--willa-sidebar-layout-gap": resolveSidebarLayoutGap(gap),
+    "--willa-sidebar-layout-min-content-width": minContentWidth,
+    ...style,
+  } as CSSProperties;
+
+  return (
+    <div
+      {...layoutProps}
+      style={layoutStyle}
+      className={classNames(
+        "willa-sidebar-layout",
+        `willa-sidebar-layout--${side}`,
+        `willa-sidebar-layout--collapse-${collapseBelow}`,
+        className,
+      )}
+    >
+      <aside className="willa-sidebar-layout-sidebar">{sidebar}</aside>
+      <main className="willa-sidebar-layout-main">{children}</main>
+    </div>
+  );
+}
+
+const sidebarLayoutGapMap: Record<SidebarLayoutGapPreset, string> = {
+  none: "0",
+  sm: "0.75rem",
+  md: "1rem",
+  lg: "1.5rem",
+};
+
+const isSidebarLayoutGapPreset = (
+  gap: SidebarLayoutGap,
+): gap is keyof typeof sidebarLayoutGapMap => {
+  return gap in sidebarLayoutGapMap;
+};
+
+const resolveSidebarLayoutGap = (gap: SidebarLayoutGap) => {
+  return isSidebarLayoutGapPreset(gap) ? sidebarLayoutGapMap[gap] : gap;
+};
+
+SidebarLayout.displayName = "SidebarLayout";

package/packages/willa-layout/src/components/SplitPane/index.css

@@ -0,0 +1,148 @@
+.willa-split-pane {
+  display: flex;
+  box-sizing: border-box;
+  width: 100%;
+  min-width: 0;
+  min-height: 0;
+  color: var(--willa-text);
+  font-family: var(--willa-body-font);
+}
+
+.willa-split-pane--horizontal {
+  flex-direction: row;
+}
+
+.willa-split-pane--vertical {
+  flex-direction: column;
+}
+
+.willa-split-pane-slot {
+  position: relative;
+  display: flex;
+  min-width: 0;
+  min-height: 0;
+  flex: 0 0 var(--willa-split-pane-panel-size);
+}
+
+.willa-split-pane--vertical .willa-split-pane-slot {
+  flex-direction: column;
+}
+
+.willa-resizable-panel,
+.willa-split-pane-panel {
+  box-sizing: border-box;
+  width: 100%;
+  min-width: 0;
+  min-height: 0;
+}
+
+.willa-split-pane-handle {
+  position: absolute;
+  z-index: 2;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: var(--willa-split-pane-handle);
+}
+
+.willa-split-pane--horizontal .willa-split-pane-handle {
+  top: 0;
+  right: -0.35rem;
+  width: 0.7rem;
+  height: 100%;
+  cursor: col-resize;
+}
+
+.willa-split-pane--vertical .willa-split-pane-handle {
+  right: 0;
+  bottom: -0.35rem;
+  width: 100%;
+  height: 0.7rem;
+  cursor: row-resize;
+}
+
+.willa-split-pane-handle::before {
+  position: absolute;
+  border-radius: 999px;
+  background: var(--willa-split-pane-divider);
+  content: "";
+}
+
+.willa-split-pane--horizontal .willa-split-pane-handle::before {
+  width: 1px;
+  height: 100%;
+}
+
+.willa-split-pane--vertical .willa-split-pane-handle::before {
+  width: 100%;
+  height: 1px;
+}
+
+.willa-split-pane-handle-mark {
+  position: relative;
+  z-index: 1;
+  border-radius: 999px;
+  background: var(--willa-split-pane-handle);
+  opacity: 0;
+  transition:
+    opacity 140ms ease,
+    background 140ms ease;
+}
+
+.willa-split-pane--horizontal .willa-split-pane-handle-mark {
+  width: 0.18rem;
+  height: 2.1rem;
+}
+
+.willa-split-pane--vertical .willa-split-pane-handle-mark {
+  width: 2.1rem;
+  height: 0.18rem;
+}
+
+.willa-split-pane-handle:hover .willa-split-pane-handle-mark,
+.willa-split-pane-handle:focus-visible .willa-split-pane-handle-mark {
+  background: var(--willa-split-pane-handle-hover);
+  opacity: 1;
+}
+
+.willa-split-pane-handle:focus-visible {
+  outline: 2px solid var(--willa-focus-ring);
+  outline-offset: 2px;
+}
+
+.willa-split-pane--disabled .willa-split-pane-handle {
+  cursor: default;
+  opacity: 0.55;
+}
+
+@media (max-width: 767px) {
+  .willa-split-pane--horizontal {
+    overflow-x: auto;
+    scrollbar-width: thin;
+    scrollbar-color: var(--willa-scrollbar-thumb) transparent;
+    -ms-overflow-style: auto;
+  }
+
+  .willa-split-pane--horizontal .willa-split-pane-slot {
+    min-width: 12rem;
+  }
+
+  .willa-split-pane--horizontal::-webkit-scrollbar {
+    width: 0.36rem;
+    height: 0.36rem;
+  }
+
+  .willa-split-pane--horizontal::-webkit-scrollbar-track,
+  .willa-split-pane--horizontal::-webkit-scrollbar-track-piece,
+  .willa-split-pane--horizontal::-webkit-scrollbar-corner {
+    background: transparent;
+  }
+
+  .willa-split-pane--horizontal::-webkit-scrollbar-thumb {
+    border-radius: 999px;
+    background: var(--willa-scrollbar-thumb);
+  }
+}