components-svelte 0.1.0

package/dist/constants/selectors.js

@@ -0,0 +1,125 @@
+const _classes = {
+    Accordion: "accordion",
+    AccordionGroup: "accordion-group",
+    Callout: "callout",
+    Card: "card",
+    Columns: "columns",
+    CodeBlock: "code-block",
+    CodeBlockIcon: "code-block-icon",
+    CodeGroup: "code-group",
+    Expandable: "expandable",
+    Field: "field",
+    Frame: "frame",
+    Icon: "icon",
+    Mermaid: "mermaid",
+    Step: "step",
+    Steps: "steps",
+    Tab: "tab",
+    Tabs: "tabs",
+    TabIcon: "tab-icon",
+    Update: "update",
+    Tooltip: "tooltip",
+    Panel: "panel",
+    APISection: "api-section",
+    APISectionHeading: "api-section-heading",
+    APISectionHeadingTitle: "api-section-heading-title",
+    APISectionHeadingSubtitle: "api-section-heading-subtitle",
+    OptionDropdown: "option-dropdown",
+    TryitButton: "tryit-button",
+    MethodPill: "method-pill",
+    MethodNavPill: "method-nav-pill",
+    NavTagPill: "nav-tag-pill",
+    NavTagPillText: "nav-tag-pill-text",
+    Anchors: "nav-anchors",
+    Anchor: "nav-anchor",
+    TabsBar: "nav-tabs",
+    TabsBarItem: "nav-tabs-item",
+    MobileNavTabsBarItem: "mobile-nav-tabs-item",
+    TableOfContents: "toc",
+    TableOfContentsItem: "toc-item",
+    Footer: "footer",
+    AdvancedFooter: "advanced-footer",
+    SidebarGroupIcon: "sidebar-group-icon",
+    SidebarGroupHeader: "sidebar-group-header",
+    SidebarTitle: "sidebar-title",
+    SidebarGroup: "sidebar-group",
+    SidebarNavGroupDivider: "sidebar-nav-group-divider",
+    NavBarLink: "navbar-link",
+    TopbarRightContainer: "topbar-right-container",
+    Logo: "nav-logo",
+    PaginationPrev: "pagination-prev",
+    PaginationNext: "pagination-next",
+    PaginationTitle: "pagination-title",
+    FeedbackToolbar: "feedback-toolbar",
+    Eyebrow: "eyebrow",
+    BreadcrumbList: "breadcrumb-list",
+    BreadcrumbItem: "breadcrumb-item",
+    Content: "mdx-content",
+    DropdownTrigger: "nav-dropdown-trigger",
+    DropdownContent: "nav-dropdown-content",
+    DropdownItem: "nav-dropdown-item",
+    DropdownItemTextContainer: "nav-dropdown-item-text-container",
+    DropdownItemTitle: "nav-dropdown-item-title",
+    DropdownItemDescription: "nav-dropdown-item-description",
+    DropdownItemIcon: "nav-dropdown-item-icon",
+    ProductsSelectorTrigger: "nav-dropdown-products-selector-trigger",
+    ProductsSelectorContent: "nav-dropdown-products-selector-content",
+    ProductsSelectorItem: "nav-dropdown-products-selector-item",
+    ProductsSelectorItemTitle: "nav-dropdown-products-selector-item-title",
+    ProductsSelectorItemDescription: "nav-dropdown-products-selector-item-description",
+    ProductsSelectorItemIcon: "nav-dropdown-products-selector-item-icon",
+    Link: "link",
+    AlmondLayout: "almond-layout",
+    AlmondNavBottomSection: "almond-nav-bottom-section",
+    AlmondNavBottomSectionDivider: "almond-nav-bottom-section-divider",
+    ChatAssistantSheet: "chat-assistant-sheet",
+    ChatAssistantSheetHeader: "chat-assistant-sheet-header",
+    ChatAssistantSheetContent: "chat-assistant-sheet-content",
+    ChatAssistantInput: "chat-assistant-input",
+    ChatAssistantFloatingInput: "chat-assistant-floating-input",
+    ChatAssistantSendButton: "chat-assistant-send-button",
+    ChatAssistantDisclaimerText: "chat-assistant-disclaimer-text",
+    ChatAssistantPayloadItem: "chat-assistant-payload-item",
+    StarterQuestionText: "starter-question-text",
+    LoginLink: "login-link",
+    LogoutLink: "logout-link",
+    ContextualFeedbackContainer: "contextual-feedback-container",
+    ContextualFeedbackForm: "contextual-feedback-form",
+    ContextualFeedbackFormTitle: "contextual-feedback-form-title",
+    ContextualFeedbackFormInput: "contextual-feedback-input",
+    ContextualFeedbackFormButton: "contextual-feedback-button",
+    ContextualFeedbackFormSubmitButton: "contextual-feedback-form-submit-button",
+    CodeSnippetFeedbackPopoverContent: "code-snippet-feedback-popover-content",
+    CodeSnippetFeedbackForm: "code-snippet-feedback-form",
+    CodeSnippetFeedbackButton: "code-snippet-feedback-button",
+    CodeSnippetFeedbackTextArea: "code-snippet-feedback-textarea",
+    CodeSnippetFeedbackFormTitle: "code-snippet-feedback-form-title",
+    CodeSnippetFeedbackFormDescription: "code-snippet-feedback-form-description",
+    CodeSnippetFeedbackFormSubmitButton: "code-snippet-feedback-form-submit-button",
+    NotFoundContainer: "not-found-container",
+    NotFoundStatusCode: "not-found-status-code",
+    NotFoundTitle: "not-found-title",
+    NotFoundDescription: "not-found-description",
+    NotFoundLogo: "not-found-logo",
+    NotFoundLogoContainer: "not-found-logo-container",
+    NotFoundMessage: "not-found-message",
+    NotFoundGoBackButton: "not-found-go-back-button",
+    NotFoundGoBackArrow: "not-found-go-back-arrow",
+    NotFoundGoBackText: "not-found-go-back-text",
+    NotFoundRecommendedPagesList: "not-found-recommended-pages-list",
+    NotFoundRecommendedPageLink: "not-found-recommended-page-link",
+    MultiViewItem: "multi-view-item",
+    MultiViewDropdown: "multi-view-dropdown",
+    MultiViewDropdownTrigger: "multi-view-dropdown-trigger",
+    MultiViewDropdownContent: "multi-view-dropdown-content",
+    MultiViewDropdownItem: "multi-view-dropdown-item",
+    Color: "color",
+    ColorRow: "color-row",
+    ColorItem: "color-item",
+    Tile: "tile",
+    Tree: "tree",
+    TreeFolder: "tree-folder",
+    TreeFile: "tree-file",
+};
+const Classes = Object.fromEntries(Object.entries(_classes).map(([key, value]) => [key, `${value}`]));
+export { Classes };

package/dist/hooks/index.d.ts

@@ -0,0 +1,8 @@
+export { useExpandable } from "./use-expandable.svelte";
+export { useExpandableMemory } from "./use-expandable-memory.svelte";
+export { useGetShikiHighlightedHtml } from "./use-get-shiki-highlighted-html.svelte";
+export { useHasHover } from "./use-has-hover";
+export { useIsDarkTheme } from "./use-is-dark-theme.svelte";
+export { useIsomorphicLayoutEffect } from "./use-isomorphic-layout-effect";
+export type { UseExpandableReturn } from "./use-expandable.svelte";
+export type { UseGetShikiHighlightedHtmlReturn } from "./use-get-shiki-highlighted-html.svelte";

package/dist/hooks/index.js

@@ -0,0 +1,6 @@
+export { useExpandable } from "./use-expandable.svelte";
+export { useExpandableMemory } from "./use-expandable-memory.svelte";
+export { useGetShikiHighlightedHtml } from "./use-get-shiki-highlighted-html.svelte";
+export { useHasHover } from "./use-has-hover";
+export { useIsDarkTheme } from "./use-is-dark-theme.svelte";
+export { useIsomorphicLayoutEffect } from "./use-isomorphic-layout-effect";

package/dist/hooks/use-expandable-memory.svelte.d.ts

@@ -0,0 +1,6 @@
+declare const useExpandableMemory: (getId: () => string | undefined, getDefaultExpanded: () => boolean, getElement: () => HTMLElement | null) => {
+    readonly isExpanded: boolean;
+    onManualToggle: (expanded: boolean) => void;
+    readonly isInSessionStorage: boolean;
+};
+export { useExpandableMemory };

package/dist/hooks/use-expandable-memory.svelte.js

@@ -0,0 +1,89 @@
+const USER_TOGGLED_EXPANDABLES_KEY = "user_toggled_expandables";
+const getManuallyToggledExpandables = () => {
+    try {
+        const manuallyToggledExpandables = sessionStorage.getItem(USER_TOGGLED_EXPANDABLES_KEY);
+        return manuallyToggledExpandables
+            ? JSON.parse(manuallyToggledExpandables)
+            : {};
+    }
+    catch {
+        return {};
+    }
+};
+const saveManuallyToggledState = (id, isExpanded) => {
+    try {
+        const current = getManuallyToggledExpandables();
+        const updated = { ...current, [id]: isExpanded };
+        sessionStorage.setItem(USER_TOGGLED_EXPANDABLES_KEY, JSON.stringify(updated));
+    }
+    catch {
+        // silently fail if setItem() fails
+    }
+};
+const useExpandableMemory = (getId, getDefaultExpanded, getElement) => {
+    // track if user manually clicked the expandable
+    let manuallyChanged = $state(false);
+    // track if the expandable state exists in session storage
+    let isInSessionStorage = $state(false);
+    let isExpanded = $state(getDefaultExpanded());
+    $effect(() => {
+        const id = getId();
+        if (!id) {
+            return;
+        }
+        const manuallyToggledExpandables = getManuallyToggledExpandables();
+        if (id in manuallyToggledExpandables) {
+            isExpanded = !!manuallyToggledExpandables[id];
+            manuallyChanged = true;
+            isInSessionStorage = true;
+        }
+    });
+    $effect(() => {
+        const defaultExpanded = getDefaultExpanded();
+        const observer = typeof IntersectionObserver === "undefined"
+            ? undefined
+            : new IntersectionObserver((entries) => {
+                const entry = entries[0];
+                if (entry) {
+                    // Only auto-expand if the user hasn't manually clicked the expandable
+                    // Don't update visibility state constantly during scroll
+                    if (entry.isIntersecting &&
+                        !manuallyChanged &&
+                        defaultExpanded) {
+                        isExpanded = isExpanded ? isExpanded : true;
+                    }
+                }
+            }, {
+                rootMargin: "100px",
+                threshold: 0,
+            });
+        const currentElement = getElement();
+        if (observer && currentElement) {
+            observer.observe(currentElement);
+        }
+        return () => {
+            if (observer && currentElement) {
+                observer.unobserve(currentElement);
+            }
+        };
+    });
+    const onManualToggle = (expanded) => {
+        isExpanded = expanded;
+        manuallyChanged = true;
+        isInSessionStorage = true;
+        const id = getId();
+        if (id) {
+            saveManuallyToggledState(id, expanded);
+        }
+    };
+    return {
+        get isExpanded() {
+            return isExpanded;
+        },
+        onManualToggle,
+        get isInSessionStorage() {
+            return isInSessionStorage;
+        },
+    };
+};
+export { useExpandableMemory };

package/dist/hooks/use-expandable.svelte.d.ts

@@ -0,0 +1,15 @@
+declare const SMALL_EXPANDABLE_NUMBER_OF_LINES = 7;
+declare const SMALL_EXPANDABLE_HEIGHT_OFFSET = 30;
+declare const EXPANDED_HEIGHT_OFFSET = 40;
+declare const SMALL_EXPANDABLE_CODE_BLOCK_HEIGHT = 45;
+declare const DEFAULT_EXPANDABLE_CODE_BLOCK_HEIGHT = 190;
+type ReactiveValue<T> = T | (() => T);
+type UseExpandableReturn = {
+    isExpanded: boolean;
+    calculatedHeight: number;
+    contentRef: HTMLElement | null;
+    toggleExpanded: () => void;
+};
+declare const useExpandable: (enable: ReactiveValue<boolean>, numberOfLines?: ReactiveValue<number | undefined>) => UseExpandableReturn;
+export { SMALL_EXPANDABLE_NUMBER_OF_LINES, SMALL_EXPANDABLE_HEIGHT_OFFSET, EXPANDED_HEIGHT_OFFSET, SMALL_EXPANDABLE_CODE_BLOCK_HEIGHT, DEFAULT_EXPANDABLE_CODE_BLOCK_HEIGHT, useExpandable, };
+export type { UseExpandableReturn };

package/dist/hooks/use-expandable.svelte.js

@@ -0,0 +1,53 @@
+const SMALL_EXPANDABLE_NUMBER_OF_LINES = 7;
+const SMALL_EXPANDABLE_HEIGHT_OFFSET = 30;
+const EXPANDED_HEIGHT_OFFSET = 40;
+const SMALL_EXPANDABLE_CODE_BLOCK_HEIGHT = 45;
+const DEFAULT_EXPANDABLE_CODE_BLOCK_HEIGHT = 190;
+const resolve = (value) => typeof value === "function" ? value() : value;
+const useExpandable = (enable, numberOfLines) => {
+    let isExpanded = $state(false);
+    let calculatedHeight = $state(0);
+    let contentRef = $state(null);
+    $effect(() => {
+        const currentEnable = resolve(enable);
+        const currentNumberOfLines = resolve(numberOfLines);
+        const currentContentRef = contentRef;
+        let rafId;
+        if (currentContentRef != null && currentEnable) {
+            rafId = requestAnimationFrame(() => {
+                if (contentRef === currentContentRef) {
+                    calculatedHeight =
+                        currentContentRef.scrollHeight +
+                            (currentNumberOfLines !== undefined &&
+                                currentNumberOfLines < SMALL_EXPANDABLE_NUMBER_OF_LINES
+                                ? SMALL_EXPANDABLE_HEIGHT_OFFSET
+                                : EXPANDED_HEIGHT_OFFSET);
+                }
+            });
+        }
+        return () => {
+            if (rafId !== undefined) {
+                cancelAnimationFrame(rafId);
+            }
+        };
+    });
+    const toggleExpanded = () => {
+        isExpanded = !isExpanded;
+    };
+    return {
+        get isExpanded() {
+            return isExpanded;
+        },
+        get calculatedHeight() {
+            return calculatedHeight;
+        },
+        get contentRef() {
+            return contentRef;
+        },
+        set contentRef(value) {
+            contentRef = value;
+        },
+        toggleExpanded,
+    };
+};
+export { SMALL_EXPANDABLE_NUMBER_OF_LINES, SMALL_EXPANDABLE_HEIGHT_OFFSET, EXPANDED_HEIGHT_OFFSET, SMALL_EXPANDABLE_CODE_BLOCK_HEIGHT, DEFAULT_EXPANDABLE_CODE_BLOCK_HEIGHT, useExpandable, };

package/dist/hooks/use-get-shiki-highlighted-html.svelte.d.ts

@@ -0,0 +1,8 @@
+import { type ShikiHighlightedHtmlArgs } from "../utils/shiki";
+type PropsSource = ShikiHighlightedHtmlArgs | (() => ShikiHighlightedHtmlArgs);
+type UseGetShikiHighlightedHtmlReturn = {
+    html: string | undefined;
+};
+declare const useGetShikiHighlightedHtml: (props: PropsSource) => UseGetShikiHighlightedHtmlReturn;
+export { useGetShikiHighlightedHtml };
+export type { UseGetShikiHighlightedHtmlReturn };

package/dist/hooks/use-get-shiki-highlighted-html.svelte.js

@@ -0,0 +1,36 @@
+import { getShikiHighlightedHtml, } from "../utils/shiki";
+const useGetShikiHighlightedHtml = (props) => {
+    let html = $state(undefined);
+    let requestSequence = 0;
+    $effect(() => {
+        const currentProps = typeof props === "function" ? props() : props;
+        const htmlOrPromise = getShikiHighlightedHtml(currentProps);
+        const requestId = ++requestSequence;
+        if (!(htmlOrPromise instanceof Promise)) {
+            html = htmlOrPromise;
+            return;
+        }
+        html = undefined;
+        void htmlOrPromise
+            .then((result) => {
+            if (requestId === requestSequence) {
+                html = result;
+            }
+        })
+            .catch((err) => {
+            console.error(err);
+            if (requestId === requestSequence) {
+                html = undefined;
+            }
+        });
+        return () => {
+            requestSequence += 1;
+        };
+    });
+    return {
+        get html() {
+            return html;
+        },
+    };
+};
+export { useGetShikiHighlightedHtml };

package/dist/hooks/use-has-hover.d.ts

@@ -0,0 +1,2 @@
+declare const useHasHover: () => boolean;
+export { useHasHover };

package/dist/hooks/use-has-hover.js

@@ -0,0 +1,10 @@
+const useHasHover = () => {
+    try {
+        return window.matchMedia("(hover: hover)").matches;
+    }
+    catch {
+        // assume that if browser too old to support matchMedia it's likely not a touch device
+        return true;
+    }
+};
+export { useHasHover };

package/dist/hooks/use-is-dark-theme.svelte.d.ts

@@ -0,0 +1,3 @@
+export declare function useIsDarkTheme(): {
+    readonly isDarkTheme: boolean;
+};

package/dist/hooks/use-is-dark-theme.svelte.js

@@ -0,0 +1,25 @@
+import { onMount } from "svelte";
+function createIsDarkTheme() {
+    let isDarkTheme = $state(false);
+    function getIsDarkTheme() {
+        if (typeof document === "undefined")
+            return false;
+        return document.documentElement.classList.contains("dark");
+    }
+    onMount(() => {
+        isDarkTheme = getIsDarkTheme();
+        const observer = new MutationObserver(() => {
+            isDarkTheme = getIsDarkTheme();
+        });
+        observer.observe(document.documentElement, { attributes: true, attributeFilter: ["class"] });
+        return () => observer.disconnect();
+    });
+    return {
+        get isDarkTheme() {
+            return isDarkTheme;
+        },
+    };
+}
+export function useIsDarkTheme() {
+    return createIsDarkTheme();
+}

package/dist/hooks/use-isomorphic-layout-effect.d.ts

@@ -0,0 +1,3 @@
+type Cleanup = () => void;
+declare const useIsomorphicLayoutEffect: (effect: () => void | Cleanup) => void;
+export { useIsomorphicLayoutEffect };

package/dist/hooks/use-isomorphic-layout-effect.js

@@ -0,0 +1,6 @@
+import { onMount } from "svelte";
+// Svelte's onMount is the native equivalent of React's client-safe layout effect.
+const useIsomorphicLayoutEffect = (effect) => {
+    onMount(effect);
+};
+export { useIsomorphicLayoutEffect };

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./components";
+export { cn } from "./utils/cn";

package/dist/index.js

@@ -0,0 +1,2 @@
+export * from "./components";
+export { cn } from "./utils/cn";