@pathscale/ui 1.1.38 → 1.1.39

package/dist/components/accordion/Accordion.classes.d.ts

@@ -0,0 +1,38 @@
+export declare const CLASSES: {
+    readonly Root: {
+        readonly base: "accordion";
+        readonly variant: {
+            readonly default: "accordion--default";
+            readonly surface: "accordion--surface";
+        };
+    };
+    readonly Item: {
+        readonly base: "accordion__item";
+        readonly flag: {
+            readonly expanded: "accordion__item--expanded";
+            readonly disabled: "accordion__item--disabled";
+            readonly hideSeparator: "accordion__item--hide-separator";
+        };
+    };
+    readonly Trigger: {
+        readonly base: "accordion__trigger";
+    };
+    readonly Indicator: {
+        readonly base: "accordion__indicator";
+        readonly flag: {
+            readonly expanded: "accordion__indicator--expanded";
+        };
+    };
+    readonly Content: {
+        readonly base: "accordion__content";
+        readonly flag: {
+            readonly expanded: "accordion__content--expanded";
+        };
+    };
+    readonly Body: {
+        readonly base: "accordion__body";
+    };
+    readonly BodyInner: {
+        readonly base: "accordion__body-inner";
+    };
+};

package/dist/components/accordion/Accordion.classes.js

@@ -0,0 +1,39 @@
+const CLASSES = {
+    Root: {
+        base: "accordion",
+        variant: {
+            default: "accordion--default",
+            surface: "accordion--surface"
+        }
+    },
+    Item: {
+        base: "accordion__item",
+        flag: {
+            expanded: "accordion__item--expanded",
+            disabled: "accordion__item--disabled",
+            hideSeparator: "accordion__item--hide-separator"
+        }
+    },
+    Trigger: {
+        base: "accordion__trigger"
+    },
+    Indicator: {
+        base: "accordion__indicator",
+        flag: {
+            expanded: "accordion__indicator--expanded"
+        }
+    },
+    Content: {
+        base: "accordion__content",
+        flag: {
+            expanded: "accordion__content--expanded"
+        }
+    },
+    Body: {
+        base: "accordion__body"
+    },
+    BodyInner: {
+        base: "accordion__body-inner"
+    }
+};
+export { CLASSES };

package/dist/components/accordion/Accordion.css

@@ -0,0 +1,158 @@
+@layer components {
+  .accordion {
+    width: 100%;
+    contain: layout style;
+  }
+
+  .accordion__item {
+    position: relative;
+    border: 0;
+  }
+
+  .accordion__item::after {
+    content: "";
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    height: 1px;
+    width: 100%;
+    border-radius: 9999px;
+    background-color: var(--color-base-300);
+  }
+
+  .accordion__item:last-child::after {
+    content: none;
+  }
+
+  .accordion__item--hide-separator::after {
+    display: none;
+  }
+
+  .accordion__item--disabled {
+    opacity: 0.65;
+  }
+
+  .accordion__trigger {
+    cursor: pointer;
+    display: flex;
+    width: 100%;
+    align-items: center;
+    justify-content: space-between;
+    border: 0;
+    background-color: transparent;
+    padding: 1rem;
+    text-align: left;
+    font-size: 0.875rem;
+    font-weight: 500;
+    color: inherit;
+    user-select: none;
+    transition:
+      opacity 150ms ease,
+      background-color 150ms ease,
+      box-shadow 150ms ease;
+  }
+
+  .accordion__trigger:focus-visible,
+  .accordion__trigger[data-focus-visible="true"] {
+    outline: 2px solid var(--color-base-content);
+    outline-offset: 2px;
+  }
+
+  .accordion__item--disabled .accordion__trigger,
+  .accordion__trigger:disabled,
+  .accordion__trigger[aria-disabled="true"] {
+    cursor: not-allowed;
+    opacity: 0.55;
+  }
+
+  @media (hover: hover) {
+    .accordion__trigger:hover:not([aria-expanded="true"]):not(:disabled):not(
+        [aria-disabled="true"]
+      ),
+    .accordion__trigger[data-hovered="true"]:not(
+        [aria-expanded="true"]
+      ):not(:disabled):not([aria-disabled="true"]) {
+      background-color: color-mix(
+        in oklab,
+        var(--color-base-content),
+        transparent 96%
+      );
+    }
+  }
+
+  .accordion__indicator {
+    margin-inline-start: auto;
+    height: 1rem;
+    width: 1rem;
+    flex-shrink: 0;
+    opacity: 0.65;
+    transition: transform 250ms ease;
+  }
+
+  .accordion__indicator--expanded {
+    transform: rotate(-180deg);
+  }
+
+  .accordion__content {
+    display: grid;
+    grid-template-rows: 0fr;
+    opacity: 0;
+    overflow: hidden;
+    transition:
+      grid-template-rows 200ms ease,
+      opacity 200ms ease;
+  }
+
+  .accordion__content--expanded {
+    grid-template-rows: 1fr;
+    opacity: 1;
+  }
+
+  .accordion__body {
+    min-height: 0;
+    overflow: hidden;
+    font-size: 0.875rem;
+  }
+
+  .accordion__body-inner {
+    padding-inline: 1rem;
+    padding-top: 0;
+    padding-bottom: 1rem;
+    color: color-mix(in oklab, var(--color-base-content), transparent 25%);
+  }
+
+  .accordion--surface {
+    border-radius: 1.5rem;
+    background-color: var(--color-base-100);
+  }
+
+  .accordion--surface .accordion__item::after {
+    left: 3%;
+    width: 94%;
+    background-color: color-mix(
+      in oklab,
+      var(--color-base-content),
+      transparent 90%
+    );
+  }
+
+  .accordion--surface .accordion__item:first-child .accordion__trigger {
+    border-top-left-radius: 1.5rem;
+    border-top-right-radius: 1.5rem;
+  }
+
+  .accordion--surface
+    .accordion__item:last-child:not(.accordion__item--expanded)
+    .accordion__trigger {
+    border-bottom-left-radius: 1.5rem;
+    border-bottom-right-radius: 1.5rem;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .accordion__trigger,
+    .accordion__indicator,
+    .accordion__content {
+      transition: none;
+    }
+  }
+}

package/dist/components/accordion/Accordion.d.ts

@@ -1,26 +1,50 @@
-import "./collapse.css";
-import { type JSX } from "solid-js";
-import { CollapseContent, CollapseTitle } from "../collapse";
+import "./Accordion.css";
+import { type Component, type JSX, type ParentComponent } from "solid-js";
 import type { IComponentBaseProps } from "../types";
-type AccordionBaseProps = {
-    name?: string;
-    icon?: "arrow" | "plus";
-    checked?: boolean;
-    dataTheme?: string;
-    class?: string;
-    className?: string;
-    style?: JSX.CSSProperties;
-    mode?: "radio" | "checkbox" | "controlled";
-    expanded?: boolean;
-    onToggle?: () => void;
-    "aria-label"?: string;
-    "aria-describedby"?: string;
-    "aria-labelledby"?: string;
+export type AccordionSelectionMode = "single" | "multiple";
+export type AccordionVariant = "default" | "surface";
+export type AccordionValue = string | string[];
+export type AccordionRootProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "children"> & IComponentBaseProps & {
+    children?: JSX.Element;
+    selectionMode?: AccordionSelectionMode;
+    value?: AccordionValue;
+    defaultValue?: AccordionValue;
+    onValueChange?: (value: string[]) => void;
+    hideSeparator?: boolean;
+    variant?: AccordionVariant;
+    isDisabled?: boolean;
+    disabled?: boolean;
 };
-export type AccordionProps = AccordionBaseProps & IComponentBaseProps & Omit<JSX.InputHTMLAttributes<HTMLInputElement>, keyof AccordionBaseProps>;
-declare const Accordion: {
-    (props: AccordionProps): JSX.Element;
-    Title: typeof CollapseTitle;
-    Content: typeof CollapseContent;
+export type AccordionItemProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "children"> & IComponentBaseProps & {
+    value?: string;
+    children?: JSX.Element;
+    isDisabled?: boolean;
+    disabled?: boolean;
+};
+export type AccordionTriggerProps = Omit<JSX.ButtonHTMLAttributes<HTMLButtonElement>, "children" | "disabled"> & IComponentBaseProps & {
+    children?: JSX.Element;
+    showIndicator?: boolean;
+    indicator?: JSX.Element;
+};
+export type AccordionContentProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "children"> & IComponentBaseProps & {
+    children?: JSX.Element;
+    keepMounted?: boolean;
+};
+export type AccordionIndicatorProps = Omit<JSX.HTMLAttributes<HTMLSpanElement>, "children"> & IComponentBaseProps & {
+    children?: JSX.Element;
+};
+declare const AccordionRoot: ParentComponent<AccordionRootProps>;
+declare const AccordionItem: ParentComponent<AccordionItemProps>;
+declare const AccordionTrigger: Component<AccordionTriggerProps>;
+declare const AccordionContent: ParentComponent<AccordionContentProps>;
+declare const AccordionIndicator: Component<AccordionIndicatorProps>;
+declare const Accordion: ParentComponent<AccordionRootProps> & {
+    Root: ParentComponent<AccordionRootProps>;
+    Item: ParentComponent<AccordionItemProps>;
+    Trigger: Component<AccordionTriggerProps>;
+    Content: ParentComponent<AccordionContentProps>;
+    Indicator: Component<AccordionIndicatorProps>;
 };
 export default Accordion;
+export { Accordion, AccordionRoot, AccordionItem, AccordionTrigger, AccordionContent, AccordionIndicator, };
+export type { AccordionRootProps as AccordionProps };