@askrjs/themes 0.0.9 → 0.0.11

package/src/components/stack/stack.tsx

@@ -1,13 +0,0 @@
-import { Flex } from "../flex";
-import type { StackAsChildProps, StackDivProps } from "./stack.types";
-
-export function Stack(props: StackDivProps): JSX.Element;
-export function Stack(props: StackAsChildProps): JSX.Element;
-export function Stack(props: StackDivProps | StackAsChildProps) {
-  const { children, ...rest } = props;
-  return (
-    <Flex {...(rest as Record<string, unknown>)} data-slot="stack" direction="column">
-      {children}
-    </Flex>
-  );
-}

package/src/components/stack/stack.types.ts

@@ -1,22 +0,0 @@
-import type { JSXElement } from "@askrjs/askr/foundations";
-import type { Ref } from "@askrjs/askr/foundations/utilities";
-import type { FlexOwnProps } from "../flex/flex.types";
-
-export type StackOwnProps = Omit<FlexOwnProps, "direction" | "as"> & {
-  children?: unknown;
-};
-
-export type StackDivProps = Omit<JSX.IntrinsicElements["div"], "children" | "ref"> &
-  StackOwnProps & {
-    asChild?: false;
-    ref?: Ref<HTMLDivElement>;
-  };
-
-export type StackAsChildProps = StackOwnProps & {
-  asChild: true;
-  children: JSXElement;
-  ref?: Ref<unknown>;
-  style?: JSX.IntrinsicElements["div"]["style"];
-};
-
-export type StackProps = StackDivProps | StackAsChildProps;

package/src/feedback.ts

@@ -1,6 +0,0 @@
-import "./themes/default/index.css";
-
-export { EmptyState } from "./components/empty-state";
-export type * from "./components/empty-state";
-export { Spinner } from "./components/spinner";
-export type * from "./components/spinner";

package/src/layouts.ts

@@ -1,19 +0,0 @@
-import "./themes/default/index.css";
-
-export { AspectRatio } from "./components/aspect-ratio";
-export type * from "./components/aspect-ratio";
-export { Block } from "./components/block";
-export type * from "./components/block";
-export { Box } from "./components/box";
-export type * from "./components/box";
-export { Container } from "./components/container";
-export type * from "./components/container";
-export { Flex } from "./components/flex";
-export { Inline } from "./components/inline";
-export type * from "./components/inline";
-export { Section } from "./components/section";
-export type * from "./components/section";
-export { Spacer } from "./components/spacer";
-export type * from "./components/spacer";
-export { Stack } from "./components/stack";
-export type * from "./components/stack";

package/src/shells.ts

@@ -1,13 +0,0 @@
-import "./themes/default/index.css";
-
-export { Header } from "./components/header";
-export { HEADER_A11Y_CONTRACT } from "./components/header";
-export type * from "./components/header";
-export { Sidebar, SidebarPanel, SidebarToggle } from "./components/sidebar";
-export type * from "./components/sidebar";
-export { NavBrand, Navbar, NavGroup, NavItem, NavLink, NavToggle } from "./components/navbar";
-export type * from "./components/navbar";
-export type * from "./components/shell/shell-nav.types";
-export { SHELL_A11Y_CONTRACT } from "./components/shell";
-export { Shell, ShellMain, ShellNav } from "./components/shell";
-export type * from "./components/shell";

package/src/themes/default/styles/actions/toggle.css

@@ -1,50 +0,0 @@
-:where([data-slot="toggle"]) {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: var(--ak-space-sm);
-  min-height: var(--ak-density-control-height-md);
-  padding: 0 var(--ak-density-control-padding-x-md);
-  border: 1px solid var(--ak-color-border);
-  border-radius: var(--ak-radius-md);
-  background: var(--ak-color-surface);
-  color: var(--ak-color-text);
-  font-size: var(--ak-font-size-sm);
-  font-weight: var(--ak-font-weight-semibold);
-  line-height: 1;
-  cursor: pointer;
-  transition:
-    background var(--ak-duration-fast) var(--ak-ease-standard),
-    border-color var(--ak-duration-fast) var(--ak-ease-standard),
-    color var(--ak-duration-fast) var(--ak-ease-standard),
-    box-shadow var(--ak-duration-fast) var(--ak-ease-standard);
-}
-
-:where([data-slot="toggle"]:hover) {
-  background: var(--ak-color-hover);
-  border-color: var(--ak-color-border-strong);
-}
-
-:where([data-slot="toggle"]:active) {
-  background: var(--ak-color-active);
-}
-
-:where([data-slot="toggle"][data-state="on"]) {
-  border-color: var(--ak-color-primary);
-  background: var(--ak-color-primary-soft);
-  color: var(--ak-color-primary-ink);
-}
-
-:where([data-slot="toggle"]:focus-visible) {
-  outline: none;
-  box-shadow: 0 0 0 var(--ak-focus-ring-width) var(--ak-color-focus-ring);
-}
-
-:where([data-slot="toggle"][data-disabled]) {
-  background: var(--ak-color-disabled-surface);
-  border-color: var(--ak-color-disabled-border);
-  box-shadow: none;
-  color: var(--ak-color-disabled-text);
-  pointer-events: none;
-  cursor: not-allowed;
-}

package/src/themes/default/styles/disclosure/collapsible.css

@@ -1,58 +0,0 @@
-:where([data-slot="collapsible-trigger"]) {
-  display: inline-flex;
-  align-items: center;
-  justify-content: space-between;
-  min-height: var(--ak-density-control-height-md);
-  min-inline-size: 0;
-  padding: 0 var(--ak-density-control-padding-x-md);
-  border: 1px solid var(--ak-color-border);
-  border-radius: var(--ak-radius-md);
-  background: var(--ak-color-surface);
-  color: var(--ak-color-text);
-  font-size: var(--ak-font-size-sm);
-  font-weight: var(--ak-font-weight-semibold);
-  line-height: 1.2;
-  overflow-wrap: anywhere;
-  text-align: start;
-  cursor: pointer;
-  transition:
-    background var(--ak-duration-fast) var(--ak-ease-standard),
-    border-color var(--ak-duration-fast) var(--ak-ease-standard),
-    color var(--ak-duration-fast) var(--ak-ease-standard),
-    box-shadow var(--ak-duration-fast) var(--ak-ease-standard);
-}
-
-:where([data-slot="collapsible-trigger"][data-state="open"]) {
-  border-color: var(--ak-color-primary);
-}
-
-:where([data-slot="collapsible-trigger"]:hover) {
-  background: var(--ak-color-hover);
-  border-color: var(--ak-color-border-strong);
-}
-
-:where([data-slot="collapsible-trigger"]:active) {
-  background: var(--ak-color-active);
-}
-
-:where([data-slot="collapsible-trigger"]:focus-visible) {
-  outline: none;
-  box-shadow: 0 0 0 var(--ak-focus-ring-width) var(--ak-color-focus-ring);
-}
-
-:where([data-slot="collapsible-trigger"][data-disabled]) {
-  background: var(--ak-color-disabled-surface);
-  border-color: var(--ak-color-disabled-border);
-  box-shadow: none;
-  color: var(--ak-color-disabled-text);
-  pointer-events: none;
-  cursor: not-allowed;
-}
-
-:where([data-slot="collapsible-content"]) {
-  padding: var(--ak-space-md) 0 0;
-  color: var(--ak-color-text-muted);
-  font-size: var(--ak-font-size-sm);
-  line-height: var(--ak-line-height-normal);
-  overflow-wrap: anywhere;
-}

package/src/themes/default/styles/display/list-group.css

@@ -1,84 +0,0 @@
-:where(.list-group, [data-slot="list-group"]) {
-  display: grid;
-  gap: 0;
-  padding: 0;
-  margin: 0;
-  border: 1px solid color-mix(in srgb, var(--ak-color-border) 84%, var(--ak-color-surface) 16%);
-  border-radius: var(--ak-radius-lg);
-  background: var(--ak-color-surface);
-  box-shadow: var(--ak-shadow-sm);
-  list-style: none;
-  overflow: clip;
-}
-
-:where(.list-group-flush, [data-slot="list-group"][data-flush="true"]) {
-  border-inline: 0;
-  border-radius: 0;
-  box-shadow: none;
-}
-
-:where(.list-group-horizontal, [data-slot="list-group"][data-orientation="horizontal"]) {
-  grid-auto-flow: column;
-  grid-auto-columns: minmax(0, 1fr);
-}
-
-:where(.list-group-item, [data-slot="list-group-item"]) {
-  display: flex;
-  align-items: center;
-  gap: var(--ak-space-sm);
-  min-inline-size: 0;
-  min-block-size: 2.625rem;
-  padding: var(--ak-space-sm) var(--ak-space-md);
-  border-block-start: 1px solid
-    color-mix(in srgb, var(--ak-color-border-subtle) 86%, var(--ak-color-surface));
-  color: var(--ak-color-text);
-  font-size: var(--ak-font-size-sm);
-  line-height: var(--ak-line-height-normal);
-  overflow-wrap: anywhere;
-  text-decoration: none;
-  transition:
-    background var(--ak-duration-fast) var(--ak-ease-standard),
-    color var(--ak-duration-fast) var(--ak-ease-standard),
-    border-color var(--ak-duration-fast) var(--ak-ease-standard);
-}
-
-:where(.list-group > :first-child, [data-slot="list-group"] > :first-child) {
-  border-block-start: 0;
-}
-
-:where(
-  .list-group-horizontal > .list-group-item,
-  [data-slot="list-group"][data-orientation="horizontal"] > [data-slot="list-group-item"]
-) {
-  border-block-start: 0;
-  border-inline-start: 1px solid
-    color-mix(in srgb, var(--ak-color-border-subtle) 86%, var(--ak-color-surface));
-}
-
-:where(
-  .list-group-horizontal > .list-group-item:first-child,
-  [data-slot="list-group"][data-orientation="horizontal"]
-    > [data-slot="list-group-item"]:first-child
-) {
-  border-inline-start: 0;
-}
-
-:where(.list-group-item-action, [data-slot="list-group-item"][data-action="true"]) {
-  cursor: pointer;
-}
-
-:where(.list-group-item-action:hover, [data-slot="list-group-item"][data-action="true"]:hover) {
-  background: var(--ak-color-surface-muted);
-}
-
-:where(.list-group-item.active, [data-slot="list-group-item"][data-active="true"]) {
-  background: var(--ak-color-selected);
-  color: var(--ak-color-text);
-}
-
-:where(.list-group-item.disabled, [data-slot="list-group-item"][data-disabled="true"]) {
-  background: var(--ak-color-disabled-surface);
-  color: var(--ak-color-disabled-text);
-  cursor: not-allowed;
-  pointer-events: none;
-}

package/src/themes/default/styles/forms/form.css

@@ -1,5 +0,0 @@
-:where([data-slot="form"]) {
-  display: grid;
-  gap: var(--ak-space-md);
-  min-inline-size: 0;
-}

package/src/themes/default/styles/layout/responsive-layout.css

@@ -1,230 +0,0 @@
-:where([data-slot="shell"]) {
-  min-block-size: 100vh;
-  background: var(--ak-color-bg);
-  color: var(--ak-color-text);
-}
-
-:where([data-shell-scroll-lock="true"]) {
-  overflow: hidden;
-}
-
-:where([data-slot="shell"]) {
-  display: flex;
-}
-
-:where([data-slot="shell"][data-variant="topbar"]) {
-  flex-direction: column;
-}
-
-:where([data-slot="shell"][data-variant="sidebar"], [data-slot="shell"][data-variant="rail"]) {
-  flex-direction: column;
-  gap: var(--ak-space-lg);
-}
-
-:where([data-slot="shell"][data-variant="topbar"]) > :where([data-slot="shell-nav"]) {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  justify-content: space-between;
-  min-block-size: var(--ak-layout-navbar-height);
-  padding: 0.875rem var(--ak-layout-page-gutter);
-  gap: var(--ak-space-sm) var(--ak-space-md);
-  border-bottom: 1px solid var(--ak-color-border);
-  background: color-mix(in srgb, var(--ak-color-surface) 98%, transparent);
-}
-
-:where([data-slot="shell"][data-variant="sidebar"], [data-slot="shell"][data-variant="rail"])
-  > :where([data-slot="shell-nav"]) {
-  display: grid;
-  align-content: stretch;
-  flex: 0 0 100vh;
-  min-block-size: 100vh;
-  padding: var(--ak-layout-page-gutter);
-  inline-size: 100%;
-  max-inline-size: 100%;
-  min-inline-size: 0;
-  background: color-mix(in srgb, var(--ak-color-surface-muted) 92%, var(--ak-color-surface));
-  border-inline-end: 0;
-  border-block-end: 1px solid var(--ak-color-border);
-}
-
-:where([data-slot="shell"]) > :where([data-slot="shell-main"]) {
-  flex: 1 1 auto;
-  min-inline-size: 0;
-  inline-size: 100%;
-  padding: var(--ak-layout-page-gutter);
-}
-
-[data-slot="shell"][data-variant="rail"]
-  > [data-slot="shell-nav"]
-  :where([data-slot="nav-item"], [data-slot="nav-link"]) {
-  font-size: 0;
-}
-
-[data-slot="shell"][data-variant="rail"]
-  > [data-slot="shell-nav"]
-  :where([data-slot="nav-item"], [data-slot="nav-link"])
-  > :where([data-slot="icon"], svg) {
-  font-size: var(--ak-font-size-sm);
-}
-
-:where([data-slot="flex"][data-collapse-below="sm"]),
-:where([data-slot="flex"][data-collapse-below="md"]),
-:where([data-slot="flex"][data-collapse-below="lg"]),
-:where([data-slot="flex"][data-collapse-below="xl"]) {
-  flex-direction: column;
-  align-items: stretch;
-}
-
-@media (min-width: 40rem) {
-  :where([data-slot="flex"][data-collapse-below="sm"]) {
-    flex-direction: row;
-    align-items: center;
-  }
-
-  :where([data-slot="shell"][data-variant="sidebar"], [data-slot="shell"][data-variant="rail"]) {
-    flex-direction: row;
-    align-items: stretch;
-  }
-
-  :where([data-slot="shell"][data-variant="sidebar"]) > :where([data-slot="shell-nav"]) {
-    inline-size: var(--ak-layout-sidebar-width);
-    flex-basis: var(--ak-layout-sidebar-width);
-    align-self: stretch;
-    min-block-size: 100vh;
-    max-block-size: 100dvh;
-    position: sticky;
-    inset-block-start: 0;
-    overflow: hidden;
-    border-block-end: 0;
-    border-inline-end: 1px solid var(--ak-color-border);
-  }
-
-  :where([data-slot="shell"][data-variant="rail"]) > :where([data-slot="shell-nav"]) {
-    inline-size: var(--ak-layout-sidebar-rail-width);
-    flex: 0 0 var(--ak-layout-sidebar-rail-width);
-    align-self: stretch;
-    min-block-size: 100vh;
-    max-block-size: 100dvh;
-    padding-inline: 0;
-    position: sticky;
-    inset-block-start: 0;
-    overflow: hidden;
-    border-block-end: 0;
-    border-inline-end: 1px solid var(--ak-color-border);
-  }
-
-  :where([data-slot="shell"][data-variant="rail"])
-    > :where([data-slot="shell-nav"])
-    :where([data-slot="sidebar"]) {
-    inline-size: var(--ak-layout-sidebar-rail-width);
-  }
-
-  :where([data-slot="shell"][data-variant="rail"])
-    > :where([data-slot="shell-nav"])
-    :where([data-slot="sidebar-shell"]) {
-    align-items: center;
-    gap: var(--ak-space-sm);
-  }
-
-  :where([data-slot="shell"][data-variant="rail"])
-    > :where([data-slot="shell-nav"])
-    :where([data-slot="sidebar-rail"]) {
-    justify-content: center;
-    padding-inline: 0;
-  }
-
-  :where([data-slot="shell"][data-variant="rail"])
-    > :where([data-slot="shell-nav"])
-    :where(
-      [data-slot="navbar-group"],
-      [data-slot="sidebar-group"],
-      [data-slot="navbar-group-body"],
-      [data-slot="sidebar-group-body"]
-    ) {
-    inline-size: 100%;
-    min-inline-size: 0;
-  }
-
-  :where([data-slot="shell"][data-variant="rail"])
-    > :where([data-slot="shell-nav"])
-    :where([data-slot="navbar-group-label"], [data-slot="sidebar-group-label"]),
-  :where([data-slot="shell"][data-variant="rail"])
-    > :where([data-slot="shell-nav"])
-    :where([data-slot="nav-item"], [data-slot="nav-link"])
-    > :where(:not([data-slot="icon"]):not(svg)) {
-    position: absolute;
-    inline-size: 1px;
-    block-size: 1px;
-    overflow: hidden;
-    clip: rect(0 0 0 0);
-    clip-path: inset(50%);
-    white-space: nowrap;
-  }
-
-  :where([data-slot="shell"][data-variant="rail"])
-    > :where([data-slot="shell-nav"])
-    :where([data-slot="nav-item"], [data-slot="nav-link"]) {
-    justify-content: center;
-    inline-size: 100%;
-    min-inline-size: 0;
-    padding-inline: 0;
-  }
-}
-
-@media (min-width: 48rem) {
-  :where([data-slot="shell"][data-variant="topbar"]) > :where([data-slot="shell-nav"]) {
-    padding-inline: var(--ak-layout-page-gutter);
-  }
-
-  :where([data-slot="shell"]) > :where([data-slot="shell-main"]) {
-    padding: var(--ak-layout-page-gutter);
-  }
-}
-
-@media (min-width: 64rem) {
-  :where([data-slot="shell"][data-variant="sidebar"]) > :where([data-slot="shell-nav"]) {
-    inline-size: var(--ak-layout-sidebar-width);
-    flex-basis: var(--ak-layout-sidebar-width);
-    border-block-end: 0;
-    border-inline-end: 1px solid var(--ak-color-border);
-  }
-
-  :where([data-slot="shell"][data-variant="rail"]) > :where([data-slot="shell-nav"]) {
-    inline-size: var(--ak-layout-sidebar-rail-width);
-    flex-basis: var(--ak-layout-sidebar-rail-width);
-  }
-}
-
-@media (min-width: 80rem) {
-  :where([data-slot="shell"][data-variant="sidebar"]) > :where([data-slot="shell-nav"]) {
-    inline-size: var(--ak-layout-sidebar-width);
-    flex-basis: var(--ak-layout-sidebar-width);
-    border-block-end: 0;
-    border-inline-end: 1px solid var(--ak-color-border);
-  }
-
-  :where([data-slot="shell"][data-variant="rail"]) > :where([data-slot="shell-nav"]) {
-    inline-size: var(--ak-layout-sidebar-rail-width);
-    flex-basis: var(--ak-layout-sidebar-rail-width);
-  }
-}
-
-@media (min-width: 40rem) {
-  :where([data-slot="shell"][data-variant="sidebar"])
-    > [data-slot="shell-nav"]:has(
-      > [data-slot="sidebar"][data-collapsible="icon"][data-icon-collapsed="true"][data-responsive-collapsed="false"]
-    ) {
-    flex: 0 0 var(--ak-layout-sidebar-rail-width);
-    width: var(--ak-layout-sidebar-rail-width);
-    inline-size: var(--ak-layout-sidebar-rail-width);
-    flex-basis: var(--ak-layout-sidebar-rail-width);
-    min-width: var(--ak-layout-sidebar-rail-width);
-    min-inline-size: var(--ak-layout-sidebar-rail-width);
-    max-width: var(--ak-layout-sidebar-rail-width);
-    max-inline-size: var(--ak-layout-sidebar-rail-width);
-    padding-left: 0;
-    padding-right: 0;
-    padding-inline: 0;
-  }
-}

package/src/themes/default/styles/navigation/breadcrumb.css

@@ -1,45 +0,0 @@
-:where([data-slot="breadcrumb"]) {
-  color: var(--ak-color-text-muted);
-  font-size: var(--ak-font-size-xs);
-  line-height: var(--ak-line-height-tight);
-}
-
-:where([data-slot="breadcrumb-list"]) {
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-  gap: var(--ak-space-xs);
-  list-style: none;
-  margin: 0;
-  padding: 0;
-}
-
-:where([data-slot="breadcrumb-item"]) {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--ak-space-xs);
-}
-
-:where([data-slot="breadcrumb-link"]) {
-  color: var(--ak-color-text-muted);
-  text-decoration: none;
-  transition:
-    color var(--ak-duration-fast) var(--ak-ease-standard),
-    text-decoration-color var(--ak-duration-fast) var(--ak-ease-standard);
-}
-
-:where([data-slot="breadcrumb-link"]:hover) {
-  color: var(--ak-color-text);
-  text-decoration: underline;
-  text-decoration-color: color-mix(in srgb, var(--ak-color-primary) 36%, transparent);
-  text-underline-offset: 0.18em;
-}
-
-:where([data-slot="breadcrumb-current"]) {
-  color: var(--ak-color-text);
-  font-weight: var(--ak-font-weight-semibold);
-}
-
-:where([data-slot="breadcrumb-separator"]) {
-  color: var(--ak-color-border);
-}