@plexui/ui 0.2.0

package/dist/es/components/Button/CopyButton.js

@@ -0,0 +1,33 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { copyToClipboard } from "../../lib/copyToClipboard";
+import { Check, Copy } from "../Icon";
+import { Animate } from "../Transition";
+import { Button } from "./Button";
+export const CopyButton = ({ children, copyValue, onClick, ...restProps }) => {
+    const [copied, setCopied] = useState(false);
+    const copiedTimeout = useRef(null);
+    const handleClick = (evt) => {
+        // No-op when copied is true
+        if (copied) {
+            return;
+        }
+        setCopied(true);
+        onClick?.(evt);
+        // Copy content to clipboard
+        // NOTE: Failures are a silent no-op
+        copyToClipboard(typeof copyValue === "function" ? copyValue() : copyValue);
+        copiedTimeout.current = window.setTimeout(() => {
+            setCopied(false);
+        }, 1300);
+    };
+    useEffect(() => {
+        return () => {
+            if (copiedTimeout.current)
+                clearTimeout(copiedTimeout.current);
+        };
+    }, []);
+    return (_jsxs(Button, { ...restProps, onClick: handleClick, children: [_jsx(Animate, { className: "w-[var(--button-icon-size)] h-[var(--button-icon-size)]", initial: { scale: 0.6 }, enter: { scale: 1, delay: 150, duration: 300 }, exit: { scale: 0.6, duration: 150 }, forceCompositeLayer: true, children: copied ? _jsx(Check, {}, "copied-icon") : _jsx(Copy, {}, "copy-icon") }), typeof children === "function" ? children({ copied }) : children] }));
+};
+//# sourceMappingURL=CopyButton.js.map

package/dist/es/components/Button/CopyButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CopyButton.js","sourceRoot":"","sources":["../../../../src/components/Button/CopyButton.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAmB,MAAM,OAAO,CAAA;AACpE,OAAO,EAAE,eAAe,EAAyB,MAAM,2BAA2B,CAAA;AAClF,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AACrC,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA;AACvC,OAAO,EAAE,MAAM,EAAoB,MAAM,UAAU,CAAA;AAOnD,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,OAAO,EAAE,GAAG,SAAS,EAAmB,EAAE,EAAE;IAC5F,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAU,KAAK,CAAC,CAAA;IACpD,MAAM,aAAa,GAAG,MAAM,CAAgB,IAAI,CAAC,CAAA;IAEjD,MAAM,WAAW,GAAG,CAAC,GAAkC,EAAE,EAAE;QACzD,4BAA4B;QAC5B,IAAI,MAAM,EAAE,CAAC;YACX,OAAM;QACR,CAAC;QAED,SAAS,CAAC,IAAI,CAAC,CAAA;QACf,OAAO,EAAE,CAAC,GAAG,CAAC,CAAA;QAEd,4BAA4B;QAC5B,oCAAoC;QACpC,eAAe,CAAC,OAAO,SAAS,KAAK,UAAU,CAAC,CAAC,CAAC,SAAS,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC,CAAA;QAE1E,aAAa,CAAC,OAAO,GAAG,MAAM,CAAC,UAAU,CAAC,GAAG,EAAE;YAC7C,SAAS,CAAC,KAAK,CAAC,CAAA;QAClB,CAAC,EAAE,IAAI,CAAC,CAAA;IACV,CAAC,CAAA;IAED,SAAS,CAAC,GAAG,EAAE;QACb,OAAO,GAAG,EAAE;YACV,IAAI,aAAa,CAAC,OAAO;gBAAE,YAAY,CAAC,aAAa,CAAC,OAAO,CAAC,CAAA;QAChE,CAAC,CAAA;IACH,CAAC,EAAE,EAAE,CAAC,CAAA;IAEN,OAAO,CACL,MAAC,MAAM,OAAK,SAAS,EAAE,OAAO,EAAE,WAAW,aACzC,KAAC,OAAO,IACN,SAAS,EAAC,yDAAyD,EACnE,OAAO,EAAE,EAAE,KAAK,EAAE,GAAG,EAAE,EACvB,KAAK,EAAE,EAAE,KAAK,EAAE,CAAC,EAAE,KAAK,EAAE,GAAG,EAAE,QAAQ,EAAE,GAAG,EAAE,EAC9C,IAAI,EAAE,EAAE,KAAK,EAAE,GAAG,EAAE,QAAQ,EAAE,GAAG,EAAE,EACnC,mBAAmB,kBAElB,MAAM,CAAC,CAAC,CAAC,KAAC,KAAK,MAAK,aAAa,CAAG,CAAC,CAAC,CAAC,KAAC,IAAI,MAAK,WAAW,CAAG,GACxD,EACT,OAAO,QAAQ,KAAK,UAAU,CAAC,CAAC,CAAC,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAC,CAAC,CAAC,CAAC,QAAQ,IAC1D,CACV,CAAA;AACH,CAAC,CAAA","sourcesContent":["\"use client\"\n\nimport { useEffect, useRef, useState, type MouseEvent } from \"react\"\nimport { copyToClipboard, type ClipboardContent } from \"../../lib/copyToClipboard\"\nimport { Check, Copy } from \"../Icon\"\nimport { Animate } from \"../Transition\"\nimport { Button, type ButtonProps } from \"./Button\"\n\nexport type CopyButtonProps = {\n  copyValue: string | ClipboardContent | (() => string) | (() => ClipboardContent)\n  children?: React.ReactNode | ((props: { copied: boolean }) => React.ReactNode)\n} & Omit<ButtonProps, \"children\">\n\nexport const CopyButton = ({ children, copyValue, onClick, ...restProps }: CopyButtonProps) => {\n  const [copied, setCopied] = useState<boolean>(false)\n  const copiedTimeout = useRef<number | null>(null)\n\n  const handleClick = (evt: MouseEvent<HTMLButtonElement>) => {\n    // No-op when copied is true\n    if (copied) {\n      return\n    }\n\n    setCopied(true)\n    onClick?.(evt)\n\n    // Copy content to clipboard\n    // NOTE: Failures are a silent no-op\n    copyToClipboard(typeof copyValue === \"function\" ? copyValue() : copyValue)\n\n    copiedTimeout.current = window.setTimeout(() => {\n      setCopied(false)\n    }, 1300)\n  }\n\n  useEffect(() => {\n    return () => {\n      if (copiedTimeout.current) clearTimeout(copiedTimeout.current)\n    }\n  }, [])\n\n  return (\n    <Button {...restProps} onClick={handleClick}>\n      <Animate\n        className=\"w-[var(--button-icon-size)] h-[var(--button-icon-size)]\"\n        initial={{ scale: 0.6 }}\n        enter={{ scale: 1, delay: 150, duration: 300 }}\n        exit={{ scale: 0.6, duration: 150 }}\n        forceCompositeLayer\n      >\n        {copied ? <Check key=\"copied-icon\" /> : <Copy key=\"copy-icon\" />}\n      </Animate>\n      {typeof children === \"function\" ? children({ copied }) : children}\n    </Button>\n  )\n}\n"]}

package/dist/es/components/Button/index.js

@@ -0,0 +1,3 @@
+export { Button, ButtonLink } from "./Button";
+export { CopyButton } from "./CopyButton";
+//# sourceMappingURL=index.js.map

package/dist/es/components/Button/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/Button/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,UAAU,EAAoB,MAAM,UAAU,CAAA;AAC/D,OAAO,EAAE,UAAU,EAAwB,MAAM,cAAc,CAAA","sourcesContent":["export { Button, ButtonLink, type ButtonProps } from \"./Button\"\nexport { CopyButton, type CopyButtonProps } from \"./CopyButton\"\n"]}

package/dist/es/components/Checkbox/Checkbox.js

@@ -0,0 +1,15 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+import { Checkbox as RadixCheckbox } from "radix-ui";
+import { useId } from "react";
+import s from "./Checkbox.module.css";
+export const Checkbox = ({ className, label, id: propsId, disabled, orientation = "left", ...restProps }) => {
+    const reactId = useId();
+    const id = propsId ?? reactId;
+    return (_jsxs("div", { "data-disabled": disabled ? "" : undefined, "data-has-label": label ? "" : undefined, "data-orientation": orientation, className: clsx(className, s.Container), children: [_jsx(RadixCheckbox.Root, { className: s.Checkbox, id: id, disabled: disabled, ...restProps, children: _jsx(RadixCheckbox.Indicator, { className: s.CheckMark }) }), label && (_jsx("label", { htmlFor: id, className: s.Label, onMouseDown: (event) => {
+                    if (!event.defaultPrevented && event.detail > 1)
+                        event.preventDefault();
+                }, children: label }))] }));
+};
+//# sourceMappingURL=Checkbox.js.map

package/dist/es/components/Checkbox/Checkbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["../../../../src/components/Checkbox/Checkbox.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ,OAAO,IAAI,MAAM,MAAM,CAAA;AACvB,OAAO,EAAE,QAAQ,IAAI,aAAa,EAAE,MAAM,UAAU,CAAA;AACpD,OAAO,EAA0C,KAAK,EAAE,MAAM,OAAO,CAAA;AACrE,OAAO,CAAC,MAAM,uBAAuB,CAAA;AAmCrC,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,EACvB,SAAS,EACT,KAAK,EACL,EAAE,EAAE,OAAO,EACX,QAAQ,EACR,WAAW,GAAG,MAAM,EACpB,GAAG,SAAS,EACE,EAAE,EAAE;IAClB,MAAM,OAAO,GAAG,KAAK,EAAE,CAAA;IACvB,MAAM,EAAE,GAAG,OAAO,IAAI,OAAO,CAAA;IAE7B,OAAO,CACL,gCACiB,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,oBACxB,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,sBACpB,WAAW,EAC7B,SAAS,EAAE,IAAI,CAAC,SAAS,EAAE,CAAC,CAAC,SAAS,CAAC,aAEvC,KAAC,aAAa,CAAC,IAAI,IAAC,SAAS,EAAE,CAAC,CAAC,QAAQ,EAAE,EAAE,EAAE,EAAE,EAAE,QAAQ,EAAE,QAAQ,KAAM,SAAS,YAClF,KAAC,aAAa,CAAC,SAAS,IAAC,SAAS,EAAE,CAAC,CAAC,SAAS,GAAI,GAChC,EACpB,KAAK,IAAI,CACR,gBACE,OAAO,EAAE,EAAE,EACX,SAAS,EAAE,CAAC,CAAC,KAAK,EAClB,WAAW,EAAE,CAAC,KAAK,EAAE,EAAE;oBACrB,IAAI,CAAC,KAAK,CAAC,gBAAgB,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC;wBAAE,KAAK,CAAC,cAAc,EAAE,CAAA;gBACzE,CAAC,YAEA,KAAK,GACA,CACT,IACG,CACP,CAAA;AACH,CAAC,CAAA","sourcesContent":["\"use client\"\n\nimport clsx from \"clsx\"\nimport { Checkbox as RadixCheckbox } from \"radix-ui\"\nimport { type FocusEventHandler, type ReactNode, useId } from \"react\"\nimport s from \"./Checkbox.module.css\"\n\nexport type CheckboxProps = {\n  /** The `id` of the checkbox. */\n  id?: string\n  /** The state of the checkbox when it is initially rendered. Use when you do not need to control its state. */\n  defaultChecked?: boolean | \"indeterminate\"\n  /** The controlled state of the checkbox. Must be used in conjunction with `onCheckedChange`. */\n  checked?: boolean | \"indeterminate\"\n  /** Optional accessible label rendered to the right of the checkbox. */\n  label?: ReactNode\n  /** Event handler called when the state of the checkbox changes. */\n  onCheckedChange?: (nextState: boolean) => void\n  /** Event handler called when the checkbox looses focus. */\n  onBlur?: FocusEventHandler<HTMLButtonElement>\n  /** Event handler called when the checkbox gains focus. */\n  onFocus?: FocusEventHandler<HTMLButtonElement>\n  /** When `true`, prevents the user from interacting with the checkbox. */\n  disabled?: boolean\n  /** When `true`, indicates that the user must check the checkbox before the owning form can be submitted. */\n  required?: boolean\n  /** The name of the checkbox. Submitted with its owning form as part of a name/value pair. */\n  name?: string\n  /** The value given as data when submitted with a `name`. */\n  value?: string\n  /** CSS classes applied to wrapper node */\n  className?: string\n  /**\n   * The orientation of the checkbox relative to the label.\n   *\n   * @default \"left\"\n   */\n  orientation?: \"left\" | \"right\"\n}\n\nexport const Checkbox = ({\n  className,\n  label,\n  id: propsId,\n  disabled,\n  orientation = \"left\",\n  ...restProps\n}: CheckboxProps) => {\n  const reactId = useId()\n  const id = propsId ?? reactId\n\n  return (\n    <div\n      data-disabled={disabled ? \"\" : undefined}\n      data-has-label={label ? \"\" : undefined}\n      data-orientation={orientation}\n      className={clsx(className, s.Container)}\n    >\n      <RadixCheckbox.Root className={s.Checkbox} id={id} disabled={disabled} {...restProps}>\n        <RadixCheckbox.Indicator className={s.CheckMark} />\n      </RadixCheckbox.Root>\n      {label && (\n        <label\n          htmlFor={id}\n          className={s.Label}\n          onMouseDown={(event) => {\n            if (!event.defaultPrevented && event.detail > 1) event.preventDefault()\n          }}\n        >\n          {label}\n        </label>\n      )}\n    </div>\n  )\n}\n"]}

package/dist/es/components/Checkbox/Checkbox.module.css

@@ -0,0 +1,182 @@
+@layer components {.Container {
+  position: relative;
+  display: flex;
+}
+
+  .Container[data-has-label] {
+    align-items: flex-start;
+  }
+
+  .Container[data-orientation="right"] {
+    flex-direction: row-reverse;
+  }
+
+  /* Radix pushes the inputs off screen in a weird way that
+    messes with error overlays */
+  .Container > input {
+    right: 0;
+    bottom: 0;
+    left: 0;
+    height: 1px !important;
+    transform: none !important;
+  }.Checkbox {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 18px;
+  max-width: 18px;
+  height: 18px;
+  padding: 0;
+  border-radius: var(--radius-xs);
+  background-color: transparent;
+  cursor: pointer;
+  transition:
+    border-color 150ms ease,
+    background-color 150ms ease;
+}.Checkbox, :where([data-theme="light"]) .Checkbox {
+border: 1px solid var(--gray-200);
+}:where([data-theme="dark"]) .Checkbox {
+border: 1px solid var(--gray-500);
+}
+
+  [data-has-label] .Checkbox {
+    /* Adjust downward for label line-height - not using center to account for long labels than can wrap. */
+    top: 1px;
+  }
+    @media (hover: hover) and (pointer: fine) {.Checkbox:where(:not([data-disabled], [data-state="checked"])):hover, :where([data-theme="light"]) .Checkbox:where(:not([data-disabled], [data-state="checked"])):hover {
+border-color: var(--gray-300);
+}:where([data-theme="dark"]) .Checkbox:where(:not([data-disabled], [data-state="checked"])):hover {
+border-color: var(--gray-600);
+}
+}
+
+  .Checkbox[data-state="indeterminate"],
+  .Checkbox[data-state="checked"] {
+    border-color: var(--gray-900);
+    background-color: var(--gray-900);
+  }
+
+  .Checkbox:focus {
+    outline: none;
+  }
+
+  .Checkbox:focus-visible {
+    outline: 2px solid var(--color-ring);
+    outline-offset: 2px;
+  }
+
+  .Checkbox[data-disabled] {
+    cursor: not-allowed;
+  }
+
+  .Checkbox[data-disabled], :where([data-theme="light"]) .Checkbox[data-disabled] {
+border-color: var(--gray-150);
+background: var(--gray-25);
+}
+
+  :where([data-theme="dark"]) .Checkbox[data-disabled] {
+border-color: var(--gray-300);
+background: var(--gray-200);
+}
+
+    .Checkbox[data-disabled][data-state="checked"], :where([data-theme="light"]) .Checkbox[data-disabled][data-state="checked"] {
+border-color: var(--gray-300);
+background-color: var(--gray-300);
+}
+
+    :where([data-theme="dark"]) .Checkbox[data-disabled][data-state="checked"] {
+border-color: var(--gray-200);
+background-color: var(--gray-200);
+}.CheckMark {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 64%;
+  height: 32%;
+  transform: rotate(-45deg) translate(-10%, 100%);
+  transform-origin: center;
+  transition:
+    opacity 150ms ease,
+    transform 150ms ease;
+}
+
+  @starting-style {.CheckMark {
+    opacity: 0
+}
+  }
+
+  [data-state="indeterminate"] .CheckMark {
+    transform: translate(30%, 80%);
+  }
+
+    [data-state="indeterminate"] .CheckMark::before {
+      opacity: 0;
+    }
+
+  /* CheckMark arms */
+  .CheckMark::before,
+  .CheckMark::after {
+    position: absolute;
+    display: block;
+    background: var(--gray-0);
+    content: "";
+    will-change: transform;
+  }
+
+    @starting-style {
+  .CheckMark::before,
+  .CheckMark::after {
+      transform: scale(0)
+  }
+    }
+    /* pure black checkbox is not low enough contrast to look disabled */
+      :where([data-theme="dark"]) .CheckMark[data-disabled]::before,
+      :where([data-theme="dark"]) .CheckMark[data-disabled]::after {
+        background: var(--gray-100);
+      }
+
+  .CheckMark::before {
+    top: 0;
+    bottom: 0;
+    left: 0;
+    width: 2px;
+    transform-origin: 0 0;
+    transition:
+      transform 100ms ease 80ms,
+      opacity 200ms ease;
+  }
+
+  .CheckMark [data-state="indeterminate"]::before {
+    opacity: 0;
+  }
+
+  .CheckMark::after {
+    right: 0;
+    bottom: 0;
+    left: 0;
+    height: 2px;
+    transform-origin: 0 100%;
+    transition: transform 100ms ease 160ms;
+  }.Label {
+  display: flex;
+  align-items: center;
+  min-height: 20px;
+  cursor: pointer;
+  font-size: 14px;
+  line-height: 20px;
+}
+
+  [data-disabled] .Label {
+    cursor: not-allowed;
+  }
+
+  [data-orientation="left"] .Label {
+    padding-left: 8px;
+  }
+
+  [data-orientation="right"] .Label {
+    padding-right: 8px;
+  }
+}

package/dist/es/components/Checkbox/index.js

@@ -0,0 +1,2 @@
+export { Checkbox } from "./Checkbox";
+//# sourceMappingURL=index.js.map

package/dist/es/components/Checkbox/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/Checkbox/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAsB,MAAM,YAAY,CAAA","sourcesContent":["export { Checkbox, type CheckboxProps } from \"./Checkbox\"\n"]}

package/dist/es/components/CodeBlock/CodeBlock.js

@@ -0,0 +1,74 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import clsx from "clsx";
+import {} from "react";
+import { createElement, PrismLight as SyntaxHighlighter } from "react-syntax-highlighter";
+import bash from "react-syntax-highlighter/dist/esm/languages/prism/bash";
+import c from "react-syntax-highlighter/dist/esm/languages/prism/c";
+import clike from "react-syntax-highlighter/dist/esm/languages/prism/clike";
+import css from "react-syntax-highlighter/dist/esm/languages/prism/css";
+import diff from "react-syntax-highlighter/dist/esm/languages/prism/diff";
+import docker from "react-syntax-highlighter/dist/esm/languages/prism/docker";
+import go from "react-syntax-highlighter/dist/esm/languages/prism/go";
+import java from "react-syntax-highlighter/dist/esm/languages/prism/java";
+import javascript from "react-syntax-highlighter/dist/esm/languages/prism/javascript";
+import json from "react-syntax-highlighter/dist/esm/languages/prism/json";
+import jsx from "react-syntax-highlighter/dist/esm/languages/prism/jsx";
+import kotlin from "react-syntax-highlighter/dist/esm/languages/prism/kotlin";
+import markdown from "react-syntax-highlighter/dist/esm/languages/prism/markdown";
+import markup from "react-syntax-highlighter/dist/esm/languages/prism/markup";
+import php from "react-syntax-highlighter/dist/esm/languages/prism/php";
+import python from "react-syntax-highlighter/dist/esm/languages/prism/python";
+import ruby from "react-syntax-highlighter/dist/esm/languages/prism/ruby";
+import scss from "react-syntax-highlighter/dist/esm/languages/prism/scss";
+import sql from "react-syntax-highlighter/dist/esm/languages/prism/sql";
+import toml from "react-syntax-highlighter/dist/esm/languages/prism/toml";
+import tsx from "react-syntax-highlighter/dist/esm/languages/prism/tsx";
+import typescript from "react-syntax-highlighter/dist/esm/languages/prism/typescript";
+import yaml from "react-syntax-highlighter/dist/esm/languages/prism/yaml";
+import { CopyButton } from "../Button";
+import s from "./CodeBlock.module.css";
+SyntaxHighlighter.registerLanguage("javascript", javascript);
+SyntaxHighlighter.registerLanguage("jsx", jsx);
+SyntaxHighlighter.registerLanguage("typescript", typescript);
+SyntaxHighlighter.registerLanguage("tsx", tsx);
+SyntaxHighlighter.registerLanguage("markup", markup);
+SyntaxHighlighter.registerLanguage("css", css);
+SyntaxHighlighter.registerLanguage("scss", scss);
+SyntaxHighlighter.registerLanguage("c", c);
+SyntaxHighlighter.registerLanguage("clike", clike);
+SyntaxHighlighter.registerLanguage("bash", bash);
+SyntaxHighlighter.registerLanguage("json", json);
+SyntaxHighlighter.registerLanguage("jsonc", json);
+SyntaxHighlighter.registerLanguage("python", python);
+SyntaxHighlighter.registerLanguage("sql", sql);
+SyntaxHighlighter.registerLanguage("diff", diff);
+SyntaxHighlighter.registerLanguage("markdown", markdown);
+SyntaxHighlighter.registerLanguage("yaml", yaml);
+SyntaxHighlighter.registerLanguage("toml", toml);
+SyntaxHighlighter.registerLanguage("docker", docker);
+SyntaxHighlighter.registerLanguage("java", java);
+SyntaxHighlighter.registerLanguage("go", go);
+SyntaxHighlighter.registerLanguage("php", php);
+SyntaxHighlighter.registerLanguage("ruby", ruby);
+SyntaxHighlighter.registerLanguage("kotlin", kotlin);
+export function CodeBlock({ children, language, className, }) {
+    return (_jsxs(CodeBlockBase, { className: className, children: [_jsx(CodeBlockBase.Code, { language: language, children: children }), _jsx(CodeBlockBase.CopyButton, { copyValue: children })] }));
+}
+export function CodeBlockBase({ className, children, ...restProps }) {
+    return (_jsx("div", { className: clsx(s.CodeBlock, className), ...restProps, children: children }));
+}
+CodeBlockBase.CopyButton = function CodeBlockCopyButton({ className, copyValue, loading, disabled, }) {
+    return (_jsx("div", { className: clsx(s.CopyButtonContainer, className), children: _jsx(CopyButton, { copyValue: copyValue, variant: "ghost", color: "secondary", pill: false, size: "2xs", uniform: true, loading: loading, disabled: disabled }) }));
+};
+CodeBlockBase.Code = function CodeBlockCode({ className, children, language, codeTagProps, }) {
+    return (_jsx(SyntaxHighlighter, { className: clsx(s.SyntaxHighlighter, className), language: language, showLineNumbers: false, showInlineLineNumbers: false, useInlineStyles: false, codeTagProps: codeTagProps, renderer: ({ rows }) => {
+            return (_jsx(_Fragment, { children: rows.map((r, i) => createElement({
+                    key: i,
+                    stylesheet: {},
+                    useInlineStyles: true,
+                    node: r,
+                })) }));
+        }, children: children }));
+};
+//# sourceMappingURL=CodeBlock.js.map

package/dist/es/components/CodeBlock/CodeBlock.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CodeBlock.js","sourceRoot":"","sources":["../../../../src/components/CodeBlock/CodeBlock.tsx"],"names":[],"mappings":"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","sourcesContent":["\"use client\"\n\nimport clsx from \"clsx\"\nimport { type ComponentProps } from \"react\"\nimport { createElement, PrismLight as SyntaxHighlighter } from \"react-syntax-highlighter\"\nimport bash from \"react-syntax-highlighter/dist/esm/languages/prism/bash\"\nimport c from \"react-syntax-highlighter/dist/esm/languages/prism/c\"\nimport clike from \"react-syntax-highlighter/dist/esm/languages/prism/clike\"\nimport css from \"react-syntax-highlighter/dist/esm/languages/prism/css\"\nimport diff from \"react-syntax-highlighter/dist/esm/languages/prism/diff\"\nimport docker from \"react-syntax-highlighter/dist/esm/languages/prism/docker\"\nimport go from \"react-syntax-highlighter/dist/esm/languages/prism/go\"\nimport java from \"react-syntax-highlighter/dist/esm/languages/prism/java\"\nimport javascript from \"react-syntax-highlighter/dist/esm/languages/prism/javascript\"\nimport json from \"react-syntax-highlighter/dist/esm/languages/prism/json\"\nimport jsx from \"react-syntax-highlighter/dist/esm/languages/prism/jsx\"\nimport kotlin from \"react-syntax-highlighter/dist/esm/languages/prism/kotlin\"\nimport markdown from \"react-syntax-highlighter/dist/esm/languages/prism/markdown\"\nimport markup from \"react-syntax-highlighter/dist/esm/languages/prism/markup\"\nimport php from \"react-syntax-highlighter/dist/esm/languages/prism/php\"\nimport python from \"react-syntax-highlighter/dist/esm/languages/prism/python\"\nimport ruby from \"react-syntax-highlighter/dist/esm/languages/prism/ruby\"\nimport scss from \"react-syntax-highlighter/dist/esm/languages/prism/scss\"\nimport sql from \"react-syntax-highlighter/dist/esm/languages/prism/sql\"\nimport toml from \"react-syntax-highlighter/dist/esm/languages/prism/toml\"\nimport tsx from \"react-syntax-highlighter/dist/esm/languages/prism/tsx\"\nimport typescript from \"react-syntax-highlighter/dist/esm/languages/prism/typescript\"\nimport yaml from \"react-syntax-highlighter/dist/esm/languages/prism/yaml\"\n\nimport { CopyButton } from \"../Button\"\nimport s from \"./CodeBlock.module.css\"\n\nSyntaxHighlighter.registerLanguage(\"javascript\", javascript)\nSyntaxHighlighter.registerLanguage(\"jsx\", jsx)\nSyntaxHighlighter.registerLanguage(\"typescript\", typescript)\nSyntaxHighlighter.registerLanguage(\"tsx\", tsx)\nSyntaxHighlighter.registerLanguage(\"markup\", markup)\nSyntaxHighlighter.registerLanguage(\"css\", css)\nSyntaxHighlighter.registerLanguage(\"scss\", scss)\nSyntaxHighlighter.registerLanguage(\"c\", c)\nSyntaxHighlighter.registerLanguage(\"clike\", clike)\nSyntaxHighlighter.registerLanguage(\"bash\", bash)\nSyntaxHighlighter.registerLanguage(\"json\", json)\nSyntaxHighlighter.registerLanguage(\"jsonc\", json)\nSyntaxHighlighter.registerLanguage(\"python\", python)\nSyntaxHighlighter.registerLanguage(\"sql\", sql)\nSyntaxHighlighter.registerLanguage(\"diff\", diff)\nSyntaxHighlighter.registerLanguage(\"markdown\", markdown)\nSyntaxHighlighter.registerLanguage(\"yaml\", yaml)\nSyntaxHighlighter.registerLanguage(\"toml\", toml)\nSyntaxHighlighter.registerLanguage(\"docker\", docker)\nSyntaxHighlighter.registerLanguage(\"java\", java)\nSyntaxHighlighter.registerLanguage(\"go\", go)\nSyntaxHighlighter.registerLanguage(\"php\", php)\nSyntaxHighlighter.registerLanguage(\"ruby\", ruby)\nSyntaxHighlighter.registerLanguage(\"kotlin\", kotlin)\n\nexport function CodeBlock({\n  children,\n  language,\n  className,\n}: {\n  children: string\n  language?: string\n  className?: string\n}) {\n  return (\n    <CodeBlockBase className={className}>\n      <CodeBlockBase.Code language={language}>{children}</CodeBlockBase.Code>\n      <CodeBlockBase.CopyButton copyValue={children} />\n    </CodeBlockBase>\n  )\n}\n\nexport function CodeBlockBase({ className, children, ...restProps }: ComponentProps<\"div\">) {\n  return (\n    <div className={clsx(s.CodeBlock, className)} {...restProps}>\n      {children}\n    </div>\n  )\n}\n\nCodeBlockBase.CopyButton = function CodeBlockCopyButton({\n  className,\n  copyValue,\n  loading,\n  disabled,\n}: {\n  className?: string\n  copyValue: string\n  disabled?: boolean\n  loading?: boolean\n}) {\n  return (\n    <div className={clsx(s.CopyButtonContainer, className)}>\n      <CopyButton\n        copyValue={copyValue}\n        variant=\"ghost\"\n        color=\"secondary\"\n        pill={false}\n        size=\"2xs\"\n        uniform\n        loading={loading}\n        disabled={disabled}\n      />\n    </div>\n  )\n}\n\nCodeBlockBase.Code = function CodeBlockCode({\n  className,\n  children,\n  language,\n  codeTagProps,\n}: {\n  className?: string\n  children: string\n  language?: string\n  codeTagProps?: React.HTMLProps<HTMLElement>\n}) {\n  return (\n    <SyntaxHighlighter\n      className={clsx(s.SyntaxHighlighter, className)}\n      language={language}\n      showLineNumbers={false}\n      showInlineLineNumbers={false}\n      useInlineStyles={false}\n      codeTagProps={codeTagProps}\n      renderer={({ rows }) => {\n        return (\n          <>\n            {rows.map((r, i) =>\n              createElement({\n                key: i,\n                stylesheet: {},\n                useInlineStyles: true,\n                node: r,\n              }),\n            )}\n          </>\n        )\n      }}\n    >\n      {children}\n    </SyntaxHighlighter>\n  )\n}\n"]}

package/dist/es/components/CodeBlock/CodeBlock.module.css

@@ -0,0 +1,118 @@
+@layer components {.CodeBlock {
+  position: relative;
+  border: none;
+  border-radius: 10px;
+  background-color: var(--codeblock-background-color);
+}.CopyButtonContainer {
+  position: absolute;
+  top: 0;
+  right: 0;
+  padding: 12px 8px 0 0;
+  border-radius: inherit;
+  color: #24292e;
+}/* Force the CopyButton to inherit the container's color on all states.
+   Ghost hover background (::before) is preserved — it's the correct behavior. */.CopyButtonContainer button {
+  color: inherit !important;
+}@media (prefers-color-scheme: dark) {
+  .CopyButtonContainer {
+    color: #d0d0d0;
+  }
+}.SyntaxHighlighter {
+  --syntax1: var(--codeblock-syntax-1);
+  --syntax2: var(--codeblock-syntax-2);
+  --syntax3: var(--codeblock-syntax-3);
+  --syntax4: var(--codeblock-syntax-4);
+  --syntax5: var(--codeblock-syntax-5);
+
+  overflow: auto;
+  display: block;
+  /* Padding inside the overflow: auto container */
+  padding: 12px 48px 12px 16px;
+  margin: 0;
+  background: transparent;
+  color: var(--color-text);
+  font-size: 0.875em;
+  /* 14px to a 16px baseline */
+  font-weight: var(--font-weight-normal);
+  line-height: 1.714em;
+  /* 24px at 14px — matches OpenAI reference */
+
+  /* stylelint-disable selector-class-pattern */
+
+  /* Order matters here, for nested tokens */
+}
+  .SyntaxHighlighter :global(.token.property),
+  .SyntaxHighlighter :global(.token.variable),
+  .SyntaxHighlighter :global(.token.attr-name),
+  .SyntaxHighlighter :global(.token.unit),
+  .SyntaxHighlighter :global(.token.id),
+  .SyntaxHighlighter :global(.token.selector),
+  .SyntaxHighlighter :global(.token.entity),
+  .SyntaxHighlighter :global(.token.tag),
+  .SyntaxHighlighter :global(.token.type) {
+    color: var(--syntax4);
+  }
+
+  .SyntaxHighlighter :global(.token.url),
+  .SyntaxHighlighter :global(.token.boolean),
+  .SyntaxHighlighter :global(.token.number),
+  .SyntaxHighlighter :global(.token.important) {
+    color: var(--syntax5);
+  }
+
+  .SyntaxHighlighter :global(.token.builtin),
+  .SyntaxHighlighter :global(.token.function),
+  .SyntaxHighlighter :global(.token.class-name) {
+    color: var(--syntax1);
+  }
+  .SyntaxHighlighter :global(.token.keyword),
+  .SyntaxHighlighter :global(.token.constant),
+  .SyntaxHighlighter :global(.token.symbol),
+  .SyntaxHighlighter :global(.token.deleted) {
+    color: var(--syntax2);
+  }
+
+  .SyntaxHighlighter :global(.token.string),
+  .SyntaxHighlighter :global(.token.char),
+  .SyntaxHighlighter :global(.token.regex),
+  .SyntaxHighlighter :global(.token.attr-value),
+  .SyntaxHighlighter :global(.token.inserted) {
+    color: var(--syntax3);
+  }
+
+  .SyntaxHighlighter :global(.token.comment),
+  .SyntaxHighlighter :global(.token.prolog),
+  .SyntaxHighlighter :global(.token.doctype),
+  .SyntaxHighlighter :global(.token.cdata) {
+    color: color-mix(in srgb, var(--color-text), transparent 50%);
+  }
+
+  .SyntaxHighlighter :global(.token.punctuation),
+  .SyntaxHighlighter :global(.token.operator) {
+    color: color-mix(in srgb, var(--color-text), transparent 40%);
+  }
+
+  .SyntaxHighlighter :global(.token.console) {
+    color: var(--color-text);
+  }/* Collapsible Code Block */.CollapsibleCodeBlock {
+  overflow: hidden;
+  transition: max-height 0.2s ease-out;
+}.CollapsibleCodeBlock[data-collapsed] {
+  overflow: hidden;
+  min-height: 140px;
+}.GradientOverlay {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  background: linear-gradient(to bottom,
+      transparent 0%,
+      transparent 20%,
+      var(--codeblock-background-color) 100%);
+}.ViewCodeButtonContainer {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+}

package/dist/es/components/CodeBlock/CollapsibleCodeBlock.js

@@ -0,0 +1,17 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+import { useState } from "react";
+import { Button } from "../Button";
+import { CodeBlockBase } from "./CodeBlock";
+import s from "./CodeBlock.module.css";
+export function CollapsibleCodeBlock({ children, language, defaultExpanded = false, collapsedHeight = 140, maxExpandedHeight, copyable = true, className, }) {
+    const [isExpanded, setIsExpanded] = useState(defaultExpanded);
+    const containerStyle = isExpanded
+        ? maxExpandedHeight
+            ? { maxHeight: maxExpandedHeight }
+            : undefined
+        : { maxHeight: collapsedHeight };
+    return (_jsxs(CodeBlockBase, { className: clsx(s.CollapsibleCodeBlock, className), "data-collapsed": !isExpanded ? "" : undefined, style: containerStyle, children: [_jsx(CodeBlockBase.Code, { language: language, children: children }), !isExpanded && (_jsxs(_Fragment, { children: [_jsx("div", { className: s.GradientOverlay }), _jsx("div", { className: s.ViewCodeButtonContainer, children: _jsx(Button, { color: "secondary", variant: "solid", size: "sm", pill: true, onClick: () => setIsExpanded(true), children: "View Code" }) })] })), isExpanded && copyable && _jsx(CodeBlockBase.CopyButton, { copyValue: children })] }));
+}
+//# sourceMappingURL=CollapsibleCodeBlock.js.map

package/dist/es/components/CodeBlock/CollapsibleCodeBlock.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CollapsibleCodeBlock.js","sourceRoot":"","sources":["../../../../src/components/CodeBlock/CollapsibleCodeBlock.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ,OAAO,IAAI,MAAM,MAAM,CAAA;AACvB,OAAO,EAAE,QAAQ,EAAuB,MAAM,OAAO,CAAA;AAErD,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAA;AAClC,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAA;AAC3C,OAAO,CAAC,MAAM,wBAAwB,CAAA;AAmBtC,MAAM,UAAU,oBAAoB,CAAC,EACnC,QAAQ,EACR,QAAQ,EACR,eAAe,GAAG,KAAK,EACvB,eAAe,GAAG,GAAG,EACrB,iBAAiB,EACjB,QAAQ,GAAG,IAAI,EACf,SAAS,GACiB;IAC1B,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,eAAe,CAAC,CAAA;IAE7D,MAAM,cAAc,GAAmC,UAAU;QAC/D,CAAC,CAAC,iBAAiB;YACjB,CAAC,CAAC,EAAE,SAAS,EAAE,iBAAiB,EAAE;YAClC,CAAC,CAAC,SAAS;QACb,CAAC,CAAC,EAAE,SAAS,EAAE,eAAe,EAAE,CAAA;IAElC,OAAO,CACL,MAAC,aAAa,IACZ,SAAS,EAAE,IAAI,CAAC,CAAC,CAAC,oBAAoB,EAAE,SAAS,CAAC,oBAClC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,EAC5C,KAAK,EAAE,cAAc,aAErB,KAAC,aAAa,CAAC,IAAI,IAAC,QAAQ,EAAE,QAAQ,YAAG,QAAQ,GAAsB,EAEtE,CAAC,UAAU,IAAI,CACd,8BACE,cAAK,SAAS,EAAE,CAAC,CAAC,eAAe,GAAI,EACrC,cAAK,SAAS,EAAE,CAAC,CAAC,uBAAuB,YACvC,KAAC,MAAM,IACL,KAAK,EAAC,WAAW,EACjB,OAAO,EAAC,OAAO,EACf,IAAI,EAAC,IAAI,EACT,IAAI,QACJ,OAAO,EAAE,GAAG,EAAE,CAAC,aAAa,CAAC,IAAI,CAAC,0BAG3B,GACL,IACL,CACJ,EAEA,UAAU,IAAI,QAAQ,IAAI,KAAC,aAAa,CAAC,UAAU,IAAC,SAAS,EAAE,QAAQ,GAAI,IAC9D,CACjB,CAAA;AACH,CAAC","sourcesContent":["\"use client\"\n\nimport clsx from \"clsx\"\nimport { useState, type ComponentProps } from \"react\"\n\nimport { Button } from \"../Button\"\nimport { CodeBlockBase } from \"./CodeBlock\"\nimport s from \"./CodeBlock.module.css\"\n\nexport type CollapsibleCodeBlockProps = {\n  /** The code string to display */\n  children: string\n  /** Syntax highlighting language */\n  language?: string\n  /** Whether the code block starts expanded */\n  defaultExpanded?: boolean\n  /** Height of the collapsed container in pixels */\n  collapsedHeight?: number\n  /** Maximum height when expanded (enables scroll if exceeded) */\n  maxExpandedHeight?: number\n  /** Whether to show the copy button when expanded */\n  copyable?: boolean\n  /** Additional class name for the container */\n  className?: string\n}\n\nexport function CollapsibleCodeBlock({\n  children,\n  language,\n  defaultExpanded = false,\n  collapsedHeight = 140,\n  maxExpandedHeight,\n  copyable = true,\n  className,\n}: CollapsibleCodeBlockProps) {\n  const [isExpanded, setIsExpanded] = useState(defaultExpanded)\n\n  const containerStyle: ComponentProps<\"div\">[\"style\"] = isExpanded\n    ? maxExpandedHeight\n      ? { maxHeight: maxExpandedHeight }\n      : undefined\n    : { maxHeight: collapsedHeight }\n\n  return (\n    <CodeBlockBase\n      className={clsx(s.CollapsibleCodeBlock, className)}\n      data-collapsed={!isExpanded ? \"\" : undefined}\n      style={containerStyle}\n    >\n      <CodeBlockBase.Code language={language}>{children}</CodeBlockBase.Code>\n\n      {!isExpanded && (\n        <>\n          <div className={s.GradientOverlay} />\n          <div className={s.ViewCodeButtonContainer}>\n            <Button\n              color=\"secondary\"\n              variant=\"solid\"\n              size=\"sm\"\n              pill\n              onClick={() => setIsExpanded(true)}\n            >\n              View Code\n            </Button>\n          </div>\n        </>\n      )}\n\n      {isExpanded && copyable && <CodeBlockBase.CopyButton copyValue={children} />}\n    </CodeBlockBase>\n  )\n}\n"]}

package/dist/es/components/CodeBlock/index.js

@@ -0,0 +1,3 @@
+export { CodeBlock, CodeBlockBase } from "./CodeBlock";
+export { CollapsibleCodeBlock } from "./CollapsibleCodeBlock";
+//# sourceMappingURL=index.js.map

package/dist/es/components/CodeBlock/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/CodeBlock/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,aAAa,CAAA;AACtD,OAAO,EAAE,oBAAoB,EAAkC,MAAM,wBAAwB,CAAA","sourcesContent":["export { CodeBlock, CodeBlockBase } from \"./CodeBlock\"\nexport { CollapsibleCodeBlock, type CollapsibleCodeBlockProps } from \"./CollapsibleCodeBlock\""]}

package/dist/es/components/DatePicker/Calendar.js

@@ -0,0 +1,121 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { DateTime, Interval } from "luxon";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { chunkIntoWeeks, getDaysOfMonth, isBefore, isSameDay, isToday } from "../../lib/dateUtils";
+import { waitForAnimationFrame } from "../../lib/helpers";
+import { Button } from "../Button";
+import { ChevronLeft, ChevronRight } from "../Icon";
+import { usePopoverClose } from "../Popover/usePopoverController";
+import { TransitionGroup } from "../Transition";
+import s from "./Calendar.module.css";
+import { useDateContext } from "./context";
+const CALENDAR_WIDTH_PX = 210;
+const CALENDAR_GAP_PX = 32;
+const STEP_DISTANCE_PX = CALENDAR_WIDTH_PX + CALENDAR_GAP_PX;
+export const DateCalendar = () => {
+    const { value, min, max, onChangeRef } = useDateContext();
+    const closePopover = usePopoverClose();
+    const calendarContainerRef = useRef(null);
+    const [calendarSteps, setCalendarSteps] = useState(0);
+    const [forceRenderIncrement, setForceRenderIncrement] = useState(0);
+    const [calendarDate, setCalendarDate] = useState(() => value ?? DateTime.now());
+    const canGoBack = !min || isBefore(min, calendarDate.startOf("month"));
+    const canGoForward = !max || isBefore(calendarDate.endOf("month"), max);
+    const handleNext = () => {
+        setCalendarSteps((c) => c + 1);
+        setCalendarDate((dt) => dt.plus({ months: 1 }));
+    };
+    const handlePrevious = () => {
+        setCalendarSteps((c) => c - 1);
+        setCalendarDate((dt) => dt.minus({ months: 1 }));
+    };
+    const handleDateSelect = (selectedDate) => {
+        onChangeRef.current(selectedDate);
+        closePopover();
+    };
+    // Force re-renders when `value` changes out of band from direct user-selection
+    useEffect(() => {
+        // No-op when value is empty
+        if (!value) {
+            return;
+        }
+        // Check if `value` is still within view of our calendar
+        const viewInterval = Interval.fromDateTimes(calendarDate.startOf("month"), calendarDate.endOf("month"));
+        const isValueInRangeOfCalendar = viewInterval.contains(value);
+        if (!isValueInRangeOfCalendar) {
+            // Reset state the calendar view entirely
+            setCalendarSteps(0);
+            setCalendarDate(value);
+            setForceRenderIncrement((c) => c + 1);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps -- Only re-run this hook when value changes
+    }, [value]);
+    // Detect height changes when new calendars are rendered
+    useEffect(() => {
+        waitForAnimationFrame(() => {
+            const container = calendarContainerRef.current;
+            if (!container) {
+                return;
+            }
+            let maxHeight = -Infinity;
+            // Find the tallest calendar
+            container.querySelectorAll("[data-calendar]")?.forEach((element) => {
+                // NOTE: clientHeight does not respect the scale() that popover uses to animate in, which is what we want
+                // We want to know the full height of the element, without any transform applied.
+                const height = element.clientHeight;
+                // Ignore calendars that are exiting
+                if (element.closest("[data-exiting")) {
+                    return;
+                }
+                if (height > maxHeight) {
+                    maxHeight = height;
+                }
+            });
+            container.style.height = `${maxHeight}px`;
+            // Don't animate the initial height.
+            // This is relevant when the calendar opens to a larger size than the default.
+            if (!container.style.transition) {
+                waitForAnimationFrame(() => {
+                    container.style.transition = `height 0.25s var(--cubic-move)`;
+                });
+            }
+        });
+    }, [calendarDate]);
+    return (_jsx("div", { className: s.CalendarWrapper, children: _jsxs("div", { ref: calendarContainerRef, className: s.CalendarContainer, children: [_jsx("div", { className: s.Previous, children: _jsx(Button, { variant: "ghost", color: "secondary", size: "sm", gutterSize: "2xs", pill: false, iconSize: "sm", onClick: handlePrevious, disabled: !canGoBack, children: _jsx(ChevronLeft, {}) }) }), _jsx("div", { className: s.Next, children: _jsx(Button, { variant: "ghost", color: "secondary", size: "sm", gutterSize: "2xs", pill: false, iconSize: "sm", onClick: handleNext, disabled: !canGoForward, children: _jsx(ChevronRight, {}) }) }), _jsx("div", { className: s.CalendarRange, style: {
+                        transform: `translate(${calendarSteps * -1 * STEP_DISTANCE_PX}px, 0)`,
+                    }, children: _jsx(TransitionGroup, { enterDuration: 400, exitDuration: 400, children: _jsx(CalendarView, { stepPosition: calendarSteps, date: calendarDate, selectedDate: value, min: min, max: max, onDateSelect: handleDateSelect }, calendarDate.toLocaleString({
+                            month: "long",
+                            year: "numeric",
+                        })) }) })] }) }, `stable-view-${forceRenderIncrement}`));
+};
+const daysOfTheWeekLabels = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
+const CalendarView = ({ date, selectedDate, min, max, onDateSelect, stepPosition, }) => {
+    // Lock position on mount and don't respond to changes
+    const [position] = useState(stepPosition);
+    const { startOfMonth, weeks, enabledInterval } = useMemo(() => {
+        const monthStart = date.startOf("month");
+        const endOfMonth = date.endOf("month");
+        const daysBeforeMonthStart = monthStart.weekday % 7;
+        const blankDays = new Array(daysBeforeMonthStart).fill(null);
+        const daysInMonth = getDaysOfMonth(monthStart);
+        const calendarCells = [...blankDays, ...daysInMonth];
+        const enabledDateInterval = Interval.fromDateTimes(min || monthStart, max || endOfMonth);
+        return {
+            startOfMonth: monthStart,
+            endOfMonth,
+            weeks: chunkIntoWeeks(calendarCells, 7),
+            enabledInterval: enabledDateInterval,
+        };
+    }, [date, min, max]);
+    return (_jsxs("div", { className: s.Calendar, style: { left: position * STEP_DISTANCE_PX }, "data-calendar": true, children: [_jsxs("p", { className: s.MonthLabel, children: [startOfMonth.monthLong, " ", startOfMonth.year] }), _jsx("div", { className: s.Week, children: daysOfTheWeekLabels.map((day) => (_jsx("div", { className: s.DayLabel, children: day }, day))) }), weeks.map((week, weekIndex) => (_jsx("div", { className: s.Week, children: week.map((d, dayIndex) => {
+                    if (!d) {
+                        return _jsx("div", { className: s.Day }, `${weekIndex}-${dayIndex}`);
+                    }
+                    const enabled = enabledInterval.contains(d);
+                    const isSelected = enabled && selectedDate && isSameDay(d, selectedDate);
+                    const dayIsToday = isToday(d);
+                    return (_jsx("div", { className: s.Day, "data-is-selected": isSelected ? "" : undefined, children: _jsxs("button", { className: s.InteractiveDay, disabled: !enabled, onClick: () => d && onDateSelect?.(d), children: [d.day, dayIsToday && _jsx("span", { className: s.TodayDot })] }) }, dayIndex));
+                }) }, weekIndex)))] }));
+};
+//# sourceMappingURL=Calendar.js.map