@aggc/ui 0.4.1 → 0.5.0

package/src/components/UiCheckbox.styles.ts

@@ -0,0 +1,118 @@
+import { cva, css } from "@styled/css";
+
+export const uiCheckboxRootClass = cva({
+  base: {
+    width: "100%",
+    display: "flex",
+    alignItems: "flex-start",
+    gap: "3",
+    textAlign: "left",
+    borderRadius: "2xl",
+    borderWidth: "1px",
+    px: "4",
+    py: "3.5",
+    color: "text.primary",
+    transition: "all 160ms ease",
+  },
+  variants: {
+    checked: {
+      true: {
+        borderColor: "border.accent",
+        bg: "bg.selected",
+        boxShadow: "0 18px 40px -30px rgba(49,94,255,0.56)",
+      },
+      false: {
+        borderColor: "border.default",
+        bg: "bg.input",
+        boxShadow: "0 14px 32px -30px rgba(15,23,42,0.42)",
+      },
+    },
+    disabled: {
+      true: {
+        cursor: "not-allowed",
+        opacity: 0.5,
+      },
+      false: {
+        cursor: "pointer",
+      },
+    },
+  },
+  compoundVariants: [
+    {
+      checked: true,
+      disabled: false,
+      css: {
+        _hover: {
+          borderColor: "border.accent",
+          transform: "translateY(-1px)",
+        },
+      },
+    },
+    {
+      checked: false,
+      disabled: false,
+      css: {
+        _hover: {
+          borderColor: "border.strong",
+          transform: "translateY(-1px)",
+        },
+      },
+    },
+  ],
+  defaultVariants: {
+    checked: false,
+    disabled: false,
+  },
+});
+
+export const uiCheckboxIndicatorClass = cva({
+  base: {
+    mt: "0.5",
+    flexShrink: "0",
+    width: "22px",
+    height: "22px",
+    borderRadius: "md",
+    borderWidth: "1px",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    transition: "all 160ms ease",
+  },
+  variants: {
+    checked: {
+      true: {
+        borderColor: "border.accent",
+        bg: "bg.accentStrong",
+        color: "text.inverse",
+        boxShadow: "0 12px 24px -16px rgba(49,94,255,0.7)",
+      },
+      false: {
+        borderColor: "border.default",
+        bg: "bg.buttonOutline",
+        color: "transparent",
+        boxShadow: "inset 0 1px 0 rgba(255,255,255,0.32)",
+      },
+    },
+  },
+  defaultVariants: {
+    checked: false,
+  },
+});
+
+export const uiCheckboxContentClass = css({
+  display: "grid",
+  gap: "1",
+  minWidth: "0",
+});
+
+export const uiCheckboxLabelClass = css({
+  fontSize: "sm",
+  fontWeight: "700",
+  lineHeight: "1.45",
+});
+
+export const uiCheckboxDescriptionClass = css({
+  color: "text.secondary",
+  fontSize: "sm",
+  lineHeight: "1.55",
+});

package/src/components/UiCheckbox.test.ts

@@ -0,0 +1,18 @@
+import { mount } from "@vue/test-utils";
+import { describe, expect, it } from "vitest";
+import UiCheckbox from "./UiCheckbox.vue";
+
+describe("UiCheckbox", () => {
+  it("toggles via keyboard", async () => {
+    const wrapper = mount(UiCheckbox, {
+      props: {
+        modelValue: false,
+        label: "Enable sync",
+      },
+    });
+
+    await wrapper.trigger("keydown.space");
+
+    expect(wrapper.emitted("update:modelValue")?.[0]).toEqual([true]);
+  });
+});

package/src/components/UiCheckbox.vue

@@ -0,0 +1,72 @@
+<script setup lang="ts">
+import { Check } from "lucide-vue-next";
+import {
+  uiCheckboxContentClass,
+  uiCheckboxDescriptionClass,
+  uiCheckboxIndicatorClass,
+  uiCheckboxLabelClass,
+  uiCheckboxRootClass,
+} from "./UiCheckbox.styles";
+
+const props = withDefaults(
+  defineProps<{
+    modelValue: boolean;
+    id?: string;
+    name?: string;
+    label?: string;
+    description?: string;
+    disabled?: boolean;
+    invalid?: boolean;
+    ariaDescribedby?: string;
+  }>(),
+  {
+    id: undefined,
+    name: undefined,
+    label: undefined,
+    description: undefined,
+    disabled: false,
+    invalid: false,
+    ariaDescribedby: undefined,
+  }
+);
+
+const emit = defineEmits<{
+  "update:modelValue": [boolean];
+}>();
+
+function toggle() {
+  if (props.disabled) {
+    return;
+  }
+  emit("update:modelValue", !props.modelValue);
+}
+</script>
+
+<template>
+  <button
+    type="button"
+    :id="id"
+    :name="name"
+    role="checkbox"
+    :aria-checked="modelValue"
+    :aria-describedby="ariaDescribedby"
+    :aria-invalid="invalid || undefined"
+    :disabled="disabled"
+    :class="uiCheckboxRootClass({ checked: modelValue, disabled })"
+    @click="toggle"
+    @keydown.enter.prevent="toggle"
+    @keydown.space.prevent="toggle"
+  >
+    <span :class="uiCheckboxIndicatorClass({ checked: modelValue })" aria-hidden="true">
+      <Check :size="14" />
+    </span>
+    <span :class="uiCheckboxContentClass">
+      <span v-if="label || $slots.default" :class="uiCheckboxLabelClass">
+        <slot>{{ label }}</slot>
+      </span>
+      <span v-if="description || $slots.description" :class="uiCheckboxDescriptionClass">
+        <slot name="description">{{ description }}</slot>
+      </span>
+    </span>
+  </button>
+</template>

package/src/components/UiField.styles.ts

@@ -0,0 +1,35 @@
+import { css } from "@styled/css";
+import { eyebrowClass, helperTextClass } from "../styles";
+
+export const uiFieldRootClass = css({
+  display: "grid",
+  gap: "2",
+  minWidth: "0",
+});
+
+export const uiFieldTopRowClass = css({
+  display: "flex",
+  alignItems: "flex-start",
+  justifyContent: "space-between",
+  gap: "3",
+});
+
+export const uiFieldLabelWrapClass = css({
+  display: "grid",
+  gap: "1",
+  minWidth: "0",
+});
+
+export const uiFieldEyebrowClass = eyebrowClass;
+
+export const uiFieldLabelClass = css({
+  fontSize: "sm",
+  fontWeight: "700",
+  color: "text.primary",
+});
+
+export const uiFieldHintClass = helperTextClass;
+
+export const uiFieldMetaClass = css({
+  flexShrink: "0",
+});

package/src/components/UiField.test.ts

@@ -0,0 +1,22 @@
+import { mount } from "@vue/test-utils";
+import { describe, expect, it } from "vitest";
+import UiField from "./UiField.vue";
+
+describe("UiField", () => {
+  it("links label and hint metadata to a control", () => {
+    const wrapper = mount(UiField, {
+      props: {
+        label: "Workspace",
+        hint: "Pick the active surface.",
+        forId: "workspace",
+        id: "workspace-hint",
+      },
+      slots: {
+        default: '<input id="workspace" aria-describedby="workspace-hint" />',
+      },
+    });
+
+    expect(wrapper.get("label").attributes("for")).toBe("workspace");
+    expect(wrapper.get("#workspace-hint").text()).toContain("Pick the active surface.");
+  });
+});

package/src/components/UiField.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import {
+  uiFieldEyebrowClass,
+  uiFieldHintClass,
+  uiFieldLabelClass,
+  uiFieldLabelWrapClass,
+  uiFieldMetaClass,
+  uiFieldRootClass,
+  uiFieldTopRowClass,
+} from "./UiField.styles";
+
+defineProps<{
+  id?: string;
+  forId?: string;
+  label?: string;
+  hint?: string;
+  eyebrow?: string;
+}>();
+</script>
+
+<template>
+  <div :class="uiFieldRootClass">
+    <div v-if="eyebrow || label || hint || $slots.meta" :class="uiFieldTopRowClass">
+      <div :class="uiFieldLabelWrapClass">
+        <p v-if="eyebrow" :class="uiFieldEyebrowClass">{{ eyebrow }}</p>
+        <label v-if="label" :for="forId" :class="uiFieldLabelClass">{{ label }}</label>
+        <p v-if="hint" :id="id" :class="uiFieldHintClass">{{ hint }}</p>
+      </div>
+      <div v-if="$slots.meta" :class="uiFieldMetaClass">
+        <slot name="meta" />
+      </div>
+    </div>
+
+    <slot />
+  </div>
+</template>

package/src/components/UiLoadingState.styles.ts

@@ -0,0 +1,36 @@
+import { css, cx } from "@styled/css";
+import { insetPanelClass } from "../styles";
+
+export const uiLoadingStateRootClass = cx(
+  insetPanelClass,
+  css({
+    paddingX: "4",
+    paddingY: "3",
+    display: "flex",
+    alignItems: "center",
+    gap: "3",
+    color: "text.secondary",
+    fontSize: "sm",
+    lineHeight: "1.5",
+  })
+);
+
+export const uiLoadingStatePulseClass = css({
+  width: "2.5",
+  height: "2.5",
+  borderRadius: "full",
+  flexShrink: "0",
+  bg: "text.accent",
+  boxShadow: "0 0 0 0 rgba(49,94,255,0.35)",
+  animation: "loadingPulse 1.2s ease-out infinite",
+});
+
+export const uiLoadingStateContentClass = css({
+  display: "grid",
+  gap: "0.5",
+});
+
+export const uiLoadingStateTitleClass = css({
+  fontWeight: "700",
+  color: "text.primary",
+});

package/src/components/UiLoadingState.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import {
+  uiLoadingStateContentClass,
+  uiLoadingStatePulseClass,
+  uiLoadingStateRootClass,
+  uiLoadingStateTitleClass,
+} from "./UiLoadingState.styles";
+
+withDefaults(
+  defineProps<{
+    title: string;
+    description: string;
+    live?: "polite" | "assertive" | "off";
+  }>(),
+  {
+    live: "polite",
+  }
+);
+</script>
+
+<template>
+  <div
+    :class="uiLoadingStateRootClass"
+    data-testid="loading-state"
+    :aria-live="live"
+    :role="live === 'off' ? undefined : 'status'"
+  >
+    <span :class="uiLoadingStatePulseClass" aria-hidden="true" data-ui-loading-pulse />
+    <div :class="uiLoadingStateContentClass">
+      <p :class="uiLoadingStateTitleClass">{{ title }}</p>
+      <p>{{ description }}</p>
+    </div>
+  </div>
+</template>

package/src/components/UiSegmentedControl.styles.ts

@@ -0,0 +1,49 @@
+import { cva, css } from "@styled/css";
+
+export const segmentedControlContainerClass = css({
+  display: "inline-flex",
+  width: "fit-content",
+  borderRadius: "full",
+  borderWidth: "1px",
+  borderColor: "border.default",
+  bg: "bg.input",
+  padding: "1",
+  gap: "1",
+  backdropFilter: "blur(18px) saturate(140%)",
+  boxShadow: "inset 0 1px 0 rgba(255,255,255,0.18)",
+});
+
+export const segmentedControlOptionClass = cva({
+  base: {
+    borderRadius: "full",
+    px: "3.5",
+    py: "2",
+    fontSize: "sm",
+    fontWeight: "600",
+    cursor: "pointer",
+    borderWidth: "1px",
+    transition: "all 160ms ease",
+  },
+  variants: {
+    active: {
+      true: {
+        borderColor: "border.accent",
+        bg: "bg.accentStrong",
+        color: "text.inverse",
+        boxShadow: "0 14px 26px -16px rgba(49,94,255,0.68)",
+        _hover: {
+          bg: "bg.accentStrong",
+        },
+      },
+      false: {
+        borderColor: "transparent",
+        bg: "transparent",
+        color: "text.secondary",
+        boxShadow: "none",
+        _hover: {
+          bg: "bg.hover",
+        },
+      },
+    },
+  },
+});

package/src/components/UiSegmentedControl.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import {
+  segmentedControlContainerClass,
+  segmentedControlOptionClass,
+} from "./UiSegmentedControl.styles";
+
+defineProps<{
+  modelValue: string;
+  options: { label: string; value: string }[];
+}>();
+
+defineEmits<{
+  "update:modelValue": [string];
+}>();
+
+</script>
+
+<template>
+  <div :class="segmentedControlContainerClass">
+    <button
+      v-for="option in options"
+      :key="option.value"
+      type="button"
+      :class="segmentedControlOptionClass({ active: option.value === modelValue })"
+      @click="$emit('update:modelValue', option.value)"
+    >
+      {{ option.label }}
+    </button>
+  </div>
+</template>

package/src/components/UiSelect.styles.ts

@@ -0,0 +1,214 @@
+import { cva, css } from "@styled/css";
+import { dropdownRecipe } from "../styles";
+
+export const uiSelectRootClass = cva({
+  base: {
+    position: "relative",
+  },
+  variants: {
+    open: {
+      true: { zIndex: "30" },
+      false: { zIndex: "1" },
+    },
+  },
+  defaultVariants: {
+    open: false,
+  },
+});
+
+export const uiSelectTriggerClass = cva({
+  base: {
+    width: "100%",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    gap: "3",
+    borderWidth: "1px",
+    fontSize: "sm",
+    overflow: "hidden",
+    backdropFilter: "blur(24px) saturate(145%)",
+    transition: "all 160ms ease",
+  },
+  variants: {
+    size: {
+      sm: {
+        minHeight: "40px",
+        borderRadius: "lg",
+        px: "3",
+        py: "2.5",
+      },
+      md: {
+        minHeight: "48px",
+        borderRadius: "xl",
+        px: "4",
+        py: "3",
+      },
+    },
+    open: {
+      true: {
+        borderColor: "border.accent",
+        bg: "bg.cardStrong",
+        boxShadow: "0 18px 42px -28px rgba(49,94,255,0.42)",
+      },
+      false: {
+        borderColor: "border.default",
+        bg: "bg.input",
+        boxShadow: "inset 0 1px 0 rgba(255,255,255,0.22)",
+      },
+    },
+    selected: {
+      true: { color: "text.primary" },
+      false: { color: "text.muted" },
+    },
+    disabled: {
+      true: {
+        cursor: "not-allowed",
+        opacity: 0.55,
+      },
+      false: {
+        cursor: "pointer",
+      },
+    },
+  },
+  compoundVariants: [
+    {
+      disabled: false,
+      css: {
+        _hover: {
+          borderColor: "border.strong",
+          bg: "bg.cardStrong",
+        },
+      },
+    },
+  ],
+  defaultVariants: {
+    size: "md",
+    open: false,
+    selected: false,
+    disabled: false,
+  },
+});
+
+export const uiSelectMenuClass = dropdownRecipe({
+  placement: "anchored",
+  density: "cozy",
+});
+
+export const uiSelectMenuClassExtra = css({
+  width: "100%",
+  zIndex: "30",
+  maxHeight: "320px",
+  overflowY: "auto",
+  display: "grid",
+});
+
+export const uiSelectValueWrapClass = css({
+  display: "block",
+  textAlign: "left",
+  minWidth: "0",
+  flex: "1",
+  overflow: "hidden",
+});
+
+export const uiSelectValueTextClass = css({
+  display: "block",
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+  whiteSpace: "nowrap",
+});
+
+export const uiSelectChevronClass = cva({
+  base: {
+    color: "text.muted",
+    transition: "transform 160ms ease",
+  },
+  variants: {
+    open: {
+      true: { transform: "rotate(180deg)" },
+      false: { transform: "rotate(0deg)" },
+    },
+  },
+  defaultVariants: {
+    open: false,
+  },
+});
+
+export const uiSelectOptionClass = cva({
+  base: {
+    width: "100%",
+    display: "flex",
+    alignItems: "flex-start",
+    justifyContent: "space-between",
+    gap: "3",
+    textAlign: "left",
+    borderRadius: "xl",
+    px: "3",
+    borderWidth: "1px",
+    cursor: "pointer",
+    transition: "all 140ms ease",
+    _hover: {
+      bg: "bg.selected",
+      borderColor: "border.accent",
+    },
+  },
+  variants: {
+    size: {
+      sm: { py: "2.5" },
+      md: { py: "3" },
+    },
+    active: {
+      true: {
+        color: "text.primary",
+        bg: "bg.selected",
+        borderColor: "border.accent",
+      },
+      false: {
+        color: "text.secondary",
+        bg: "transparent",
+        borderColor: "transparent",
+      },
+    },
+  },
+  defaultVariants: {
+    size: "md",
+    active: false,
+  },
+});
+
+export const uiSelectOptionContentClass = css({
+  display: "grid",
+  gap: "0.5",
+  minWidth: "0",
+});
+
+export const uiSelectOptionLabelClass = css({
+  fontSize: "sm",
+  fontWeight: "600",
+  minWidth: "0",
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+  whiteSpace: "nowrap",
+});
+
+export const uiSelectOptionDescriptionClass = css({
+  color: "text.secondary",
+  fontSize: "xs",
+  lineHeight: "1.45",
+  overflowWrap: "anywhere",
+});
+
+export const uiSelectCheckClass = cva({
+  base: {
+    color: "text.accent",
+    transition: "opacity 140ms ease",
+  },
+  variants: {
+    selected: {
+      true: { opacity: 1 },
+      false: { opacity: 0 },
+    },
+  },
+  defaultVariants: {
+    selected: false,
+  },
+});