@cfasim-ui/components 0.7.7 → 0.8.0

package/src/Toggle/Toggle.md

@@ -0,0 +1,68 @@
+# Toggle
+
+A boolean switch built on reka-ui.
+
+## Examples
+
+<script setup>
+import { ref } from 'vue'
+const enabled = ref(false)
+const disabled = ref(true)
+</script>
+
+### Basic
+
+<ComponentDemo>
+  <Toggle v-model="enabled" label="Enable vaccination" />
+
+<template #code>
+
+```vue
+<script setup>
+import { ref } from "vue";
+const enabled = ref(false);
+</script>
+
+<Toggle v-model="enabled" label="Enable vaccination" />
+```
+
+  </template>
+</ComponentDemo>
+
+### With hint
+
+<ComponentDemo>
+  <Toggle
+    v-model="enabled"
+    label="Enable isolation"
+    hint="Whether symptomatic individuals are isolated"
+  />
+
+<template #code>
+
+```vue
+<Toggle
+  v-model="enabled"
+  label="Enable isolation"
+  hint="Whether symptomatic individuals are isolated"
+/>
+```
+
+  </template>
+</ComponentDemo>
+
+### Disabled
+
+<ComponentDemo>
+  <Toggle v-model="disabled" label="Locked setting" :disabled="true" />
+
+<template #code>
+
+```vue
+<Toggle v-model="value" label="Locked setting" :disabled="true" />
+```
+
+  </template>
+</ComponentDemo>
+
+<!--@include: ./_api/toggle.md-->

package/src/Toggle/Toggle.vue

@@ -0,0 +1,81 @@
+<script setup lang="ts">
+import { SwitchRoot, SwitchThumb, useId } from "reka-ui";
+import Hint from "../Hint/Hint.vue";
+
+const model = defineModel<boolean>();
+
+const props = defineProps<{
+  label: string;
+  hint?: string;
+  disabled?: boolean;
+}>();
+
+const id = useId();
+</script>
+
+<template>
+  <div class="toggle">
+    <label :for="id">{{ label }}</label>
+    <Hint v-if="props.hint" :text="props.hint" />
+    <SwitchRoot :id="id" v-model="model" :disabled="disabled" class="switch">
+      <SwitchThumb class="thumb" />
+    </SwitchRoot>
+  </div>
+</template>
+
+<style scoped>
+.toggle {
+  display: flex;
+  align-items: center;
+  gap: 0.5em;
+}
+
+.toggle label {
+  user-select: none;
+}
+
+.switch {
+  --switch-w: 2.25em;
+  --switch-h: 1.25em;
+  --thumb-size: 1em;
+  --thumb-offset: 0.125em;
+
+  position: relative;
+  width: var(--switch-w);
+  height: var(--switch-h);
+  flex-shrink: 0;
+  background: var(--color-border-hover);
+  border-radius: var(--switch-h);
+  border: none;
+  padding: 0;
+  cursor: pointer;
+  transition: background 0.15s;
+}
+
+.switch[data-state="checked"] {
+  background: var(--color-primary);
+}
+
+.switch[data-disabled] {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.thumb {
+  display: block;
+  width: var(--thumb-size);
+  height: var(--thumb-size);
+  background: white;
+  border-radius: 50%;
+  position: absolute;
+  top: var(--thumb-offset);
+  left: var(--thumb-offset);
+  transition: transform 0.15s;
+}
+
+.switch[data-state="checked"] .thumb {
+  transform: translateX(
+    calc(var(--switch-w) - var(--thumb-size) - var(--thumb-offset) * 2)
+  );
+}
+</style>

package/src/ToggleGroup/ToggleGroup.md

@@ -0,0 +1,158 @@
+---
+keywords:
+  [
+    toggle group,
+    segmented control,
+    single select,
+    multi select,
+    button group,
+    radio,
+    pressed,
+  ]
+---
+
+# ToggleGroup
+
+A segmented control that looks like a [`ButtonGroup`](./button-group) but tracks
+which item(s) are pressed. By default it is single-select (like a radio group);
+add `multiple` to let several items be pressed at once. Built on
+[reka-ui's ToggleGroup](https://reka-ui.com/docs/components/toggle-group).
+
+## Examples
+
+### Single select
+
+`v-model` holds the pressed value (a `string`). Clicking the active item again
+clears the selection.
+
+<script setup>
+import { ref } from 'vue'
+const interval = ref('weekly')
+const days = ref(['mon', 'wed'])
+</script>
+
+<ComponentDemo>
+  <ToggleGroup
+    v-model="interval"
+    label="Interval"
+    :options="[
+      { value: 'daily', label: 'Daily' },
+      { value: 'weekly', label: 'Weekly' },
+      { value: 'monthly', label: 'Monthly' },
+    ]"
+  />
+  <p>Selected: {{ interval }}</p>
+
+<template #code>
+
+```vue
+<script setup>
+import { ref } from "vue";
+const interval = ref("weekly");
+</script>
+
+<ToggleGroup
+  v-model="interval"
+  label="Interval"
+  :options="[
+    { value: 'daily', label: 'Daily' },
+    { value: 'weekly', label: 'Weekly' },
+    { value: 'monthly', label: 'Monthly' },
+  ]"
+/>
+```
+
+  </template>
+</ComponentDemo>
+
+### Multiple select
+
+With `multiple`, `v-model` is a `string[]` and any number of items can be
+pressed at once.
+
+<ComponentDemo>
+  <ToggleGroup
+    v-model="days"
+    multiple
+    label="Active days"
+    :options="[
+      { value: 'mon', label: 'Mon' },
+      { value: 'tue', label: 'Tue' },
+      { value: 'wed', label: 'Wed' },
+      { value: 'thu', label: 'Thu' },
+      { value: 'fri', label: 'Fri' },
+    ]"
+  />
+  <p>Selected: {{ days.join(', ') || 'none' }}</p>
+
+<template #code>
+
+```vue
+<script setup>
+import { ref } from "vue";
+const days = ref(["mon", "wed"]);
+</script>
+
+<ToggleGroup
+  v-model="days"
+  multiple
+  label="Active days"
+  :options="[
+    { value: 'mon', label: 'Mon' },
+    { value: 'tue', label: 'Tue' },
+    { value: 'wed', label: 'Wed' },
+    { value: 'thu', label: 'Thu' },
+    { value: 'fri', label: 'Fri' },
+  ]"
+/>
+```
+
+  </template>
+</ComponentDemo>
+
+### Vertical and disabled options
+
+Set `orientation="vertical"` to stack the items, and mark individual options
+`disabled`.
+
+<ComponentDemo>
+  <ToggleGroup
+    model-value="map"
+    orientation="vertical"
+    aria-label="View"
+    :options="[
+      { value: 'map', label: 'Map' },
+      { value: 'chart', label: 'Chart' },
+      { value: 'table', label: 'Table', disabled: true },
+    ]"
+  />
+
+<template #code>
+
+```vue
+<ToggleGroup
+  v-model="view"
+  orientation="vertical"
+  aria-label="View"
+  :options="[
+    { value: 'map', label: 'Map' },
+    { value: 'chart', label: 'Chart' },
+    { value: 'table', label: 'Table', disabled: true },
+  ]"
+/>
+```
+
+  </template>
+</ComponentDemo>
+
+<!--@include: ./_api/toggle-group.md-->
+
+### ToggleGroupOption
+
+```ts
+interface ToggleGroupOption {
+  value: string;
+  label: string;
+  disabled?: boolean;
+}
+```

package/src/ToggleGroup/ToggleGroup.vue

@@ -0,0 +1,138 @@
+<script setup lang="ts">
+import { ToggleGroupItem, ToggleGroupRoot } from "reka-ui";
+import { computed } from "vue";
+import FieldLabel from "../_internal/FieldLabel.vue";
+import { useField, type FieldProps } from "../_internal/field";
+
+export interface ToggleGroupOption {
+  value: string;
+  label: string;
+  disabled?: boolean;
+}
+
+// `string` in single mode, `string[]` in multiple mode.
+const model = defineModel<string | string[]>();
+
+interface Props extends FieldProps {
+  options: ToggleGroupOption[];
+  multiple?: boolean;
+  disabled?: boolean;
+  orientation?: "horizontal" | "vertical";
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  orientation: "horizontal",
+});
+
+const { labelId, ariaProps } = useField(props);
+const type = computed<"single" | "multiple">(() =>
+  props.multiple ? "multiple" : "single",
+);
+</script>
+
+<template>
+  <div class="toggle-group-field">
+    <FieldLabel
+      class="toggle-group-label"
+      :label="label"
+      :label-id="labelId"
+      :hide-label="hideLabel"
+      :hint="hint"
+    />
+    <ToggleGroupRoot
+      v-model="model"
+      :type="type"
+      :disabled="disabled"
+      :orientation="orientation"
+      :class="['toggle-group', `toggle-group--${orientation}`]"
+      v-bind="ariaProps"
+    >
+      <ToggleGroupItem
+        v-for="opt in options"
+        :key="opt.value"
+        :value="opt.value"
+        :disabled="opt.disabled"
+        class="toggle-group-item"
+      >
+        {{ opt.label }}
+      </ToggleGroupItem>
+    </ToggleGroupRoot>
+  </div>
+</template>
+
+<style scoped>
+.toggle-group-field {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25em;
+  align-items: flex-start;
+}
+
+.toggle-group-label {
+  display: flex;
+  align-items: center;
+  gap: 0.25em;
+  font-size: var(--font-size-sm);
+}
+
+.toggle-group {
+  display: inline-flex;
+  /* 1px gaps reveal the group background as dividers between items. */
+  gap: 1px;
+  background: var(--color-border);
+  border: 1px solid var(--color-border);
+  border-radius: 0.375em;
+  /* Clip items to the rounded outer corners. Focus uses an inset outline
+   * (below) so it isn't clipped away. */
+  overflow: hidden;
+}
+
+.toggle-group--vertical {
+  flex-direction: column;
+}
+
+.toggle-group-item {
+  appearance: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 2.5em;
+  padding: 0 1em;
+  margin: 0;
+  border: none;
+  background: var(--color-bg-0);
+  color: var(--color-text);
+  font: inherit;
+  font-size: var(--font-size-sm);
+  font-weight: 500;
+  white-space: nowrap;
+  cursor: pointer;
+  transition:
+    background var(--transition-fast),
+    color var(--transition-fast);
+}
+
+.toggle-group-item:hover:not([data-disabled]) {
+  background: var(--color-bg-2);
+}
+
+.toggle-group-item[data-state="on"] {
+  background: var(--color-primary);
+  color: var(--color-text-on-primary);
+}
+
+.toggle-group-item[data-state="on"]:hover:not([data-disabled]) {
+  background: var(--color-primary-hover);
+}
+
+.toggle-group-item:focus-visible {
+  outline: 2px solid var(--color-primary);
+  outline-offset: -2px;
+  z-index: 1;
+}
+
+.toggle-group-item[data-disabled] {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+</style>

package/src/_internal/FieldLabel.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import Hint from "../Hint/Hint.vue";
+
+// The visible label for a form field, with the shared hideLabel/hint
+// behavior. Renders nothing without a `label`; the parent supplies its
+// own class via fallthrough attrs so existing scoped styles keep working.
+defineProps<{
+  label?: string;
+  labelId?: string;
+  hideLabel?: boolean;
+  hint?: string;
+  /** `for` attribute, for fields whose control is a real labelable element. */
+  htmlFor?: string;
+}>();
+</script>
+
+<template>
+  <label
+    v-if="label"
+    :id="labelId"
+    :for="htmlFor"
+    :class="{ 'visually-hidden': hideLabel }"
+  >
+    {{ label }}
+    <Hint v-if="hint && !hideLabel" :text="hint" />
+  </label>
+</template>

package/src/_internal/field.ts

@@ -0,0 +1,27 @@
+import { computed } from "vue";
+import { useId } from "reka-ui";
+
+/** Props shared by every labeled form field. */
+export interface FieldProps {
+  label?: string;
+  /** Visually hide the label while keeping it for assistive tech. */
+  hideLabel?: boolean;
+  /** Accessible name used when no visible `label` is provided. */
+  ariaLabel?: string;
+  hint?: string;
+}
+
+/**
+ * Generated field/label ids plus the aria attributes that point a control
+ * at its label: `aria-labelledby` when a visible `label` exists, else
+ * `aria-label`. Spread onto the control with `v-bind="ariaProps.value"`.
+ */
+export function useField(props: FieldProps) {
+  const id = useId();
+  const labelId = `${id}-label`;
+  const ariaProps = computed(() => ({
+    "aria-labelledby": props.label ? labelId : undefined,
+    "aria-label": !props.label ? props.ariaLabel : undefined,
+  }));
+  return { id, labelId, ariaProps };
+}

package/src/_internal/gap.ts

@@ -0,0 +1,17 @@
+export type GapToken = "none" | "small" | "medium" | "large";
+
+const GAP_TOKENS: Record<GapToken, string> = {
+  none: "0",
+  small: "var(--space-2)",
+  medium: "var(--space-4)",
+  large: "var(--space-6)",
+};
+
+export function resolveGap(
+  gap: GapToken | string | undefined,
+  fallback: GapToken = "medium",
+): string {
+  if (gap == null) return GAP_TOKENS[fallback];
+  if (gap in GAP_TOKENS) return GAP_TOKENS[gap as GapToken];
+  return gap;
+}

package/src/_internal/input.css

@@ -0,0 +1,54 @@
+/* Shared text-field skin for TextInput/NumberInput. Global (not scoped)
+ * so both components can use one copy; prefixed to avoid consumer
+ * collisions. */
+
+.cfasim-input-label {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25em;
+  font-size: var(--font-size-sm);
+}
+
+.cfasim-input-label-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.cfasim-input {
+  display: block;
+  width: 100%;
+  height: 2.5em;
+  padding: 0 0.75em;
+  font-size: inherit;
+  background-color: var(--color-bg-0);
+  color: var(--color-text);
+  border: 1px solid var(--color-border);
+  border-radius: 0.375em;
+  transition:
+    border-color var(--transition-fast),
+    box-shadow var(--transition-fast);
+}
+
+.cfasim-input:hover {
+  border-color: var(--color-border-hover);
+}
+
+.cfasim-input:focus {
+  outline: none;
+  border-color: var(--color-border-focus);
+  box-shadow: var(--shadow-focus);
+}
+
+.cfasim-input[aria-invalid="true"] {
+  border-color: var(--color-error);
+}
+
+.cfasim-input[aria-invalid="true"]:focus {
+  border-color: var(--color-error);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-error) 25%, transparent);
+}
+
+.cfasim-input::placeholder {
+  color: var(--color-text-tertiary);
+}

package/src/_internal/listbox.css

@@ -0,0 +1,53 @@
+/* Shared skin for the SelectBox/MultiSelect dropdown (reka-ui Select and
+ * Combobox portals render outside the component, so these are global).
+ * Sizing (width/max-height from the reka trigger vars) stays per-component. */
+
+.cfasim-listbox-content {
+  z-index: 100;
+  background: var(--color-bg-0);
+  border: 1px solid var(--color-border);
+  border-radius: 0.25em;
+  box-shadow:
+    0 4px 6px -1px rgba(0, 0, 0, 0.1),
+    0 2px 4px -2px rgba(0, 0, 0, 0.1);
+}
+
+.cfasim-listbox-viewport {
+  padding: 0.25em;
+}
+
+.cfasim-listbox-empty {
+  padding: 0.5em;
+  font-size: var(--font-size-sm);
+  color: var(--color-text-secondary);
+  text-align: center;
+}
+
+.cfasim-listbox-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5em;
+  padding: 0.25em 0.5em;
+  border-radius: 0.25em;
+  font-size: var(--font-size-sm);
+  white-space: nowrap;
+  cursor: pointer;
+  user-select: none;
+  outline: none;
+}
+
+.cfasim-listbox-item[data-highlighted] {
+  background: var(--color-primary);
+  color: white;
+}
+
+.cfasim-listbox-item[data-state="checked"] {
+  font-weight: 600;
+}
+
+.cfasim-listbox-indicator {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+}

package/src/env.d.ts

@@ -0,0 +1,4 @@
+// Ambient declaration for side-effect CSS imports (e.g. `import "./x.css"`).
+// Required since TypeScript 6, which errors (TS2882) on side-effect imports
+// without a module declaration.
+declare module "*.css";

package/src/index.ts

@@ -0,0 +1,33 @@
+export { default as Box } from "./Box/Box.vue";
+export type { BoxVariant } from "./Box/Box.vue";
+export { default as Button } from "./Button/Button.vue";
+export { default as ButtonGroup } from "./ButtonGroup/ButtonGroup.vue";
+export { default as Container } from "./Container/Container.vue";
+export type { ContainerGap } from "./Container/Container.vue";
+export { default as Expander } from "./Expander/Expander.vue";
+export { default as Grid } from "./Grid/Grid.vue";
+export type { GridCols, GridGap } from "./Grid/Grid.vue";
+export { default as Hint } from "./Hint/Hint.vue";
+export { default as Icon } from "./Icon/Icon.vue";
+export type { IconSize } from "./Icon/Icon.vue";
+export { registerIcons, hasIcon } from "./Icon/registry";
+export type { IconRegistration, IconVariants } from "./Icon/registry";
+export { default as LightDarkToggle } from "./LightDarkToggle/LightDarkToggle.vue";
+export { default as MultiSelect } from "./MultiSelect/MultiSelect.vue";
+export type { MultiSelectOption } from "./MultiSelect/MultiSelect.vue";
+export { default as NumberInput } from "./NumberInput/NumberInput.vue";
+export type { NumberRange } from "./NumberInput/NumberInput.vue";
+export { default as ParamEditor } from "./ParamEditor/ParamEditor.vue";
+export type {
+  ParamEditorFormat,
+  ParamEditorValue,
+} from "./ParamEditor/ParamEditor.vue";
+export { default as SelectBox } from "./SelectBox/SelectBox.vue";
+export type { SelectOption } from "./SelectBox/SelectBox.vue";
+export { default as SidebarLayout } from "./SidebarLayout/SidebarLayout.vue";
+export type { Tab } from "./SidebarLayout/SidebarLayout.vue";
+export { default as Spinner } from "./Spinner/Spinner.vue";
+export { default as TextInput } from "./TextInput/TextInput.vue";
+export { default as Toggle } from "./Toggle/Toggle.vue";
+export { default as ToggleGroup } from "./ToggleGroup/ToggleGroup.vue";
+export type { ToggleGroupOption } from "./ToggleGroup/ToggleGroup.vue";

package/src/svg.d.ts

@@ -0,0 +1,5 @@
+declare module "*.svg?component" {
+  import type { DefineComponent } from "vue";
+  const component: DefineComponent;
+  export default component;
+}