@vireo-ai/trellis-ui 0.1.0 → 0.1.2

package/src/components/input/styles.css

@@ -0,0 +1,11 @@
+@layer components {
+  [data-ui-input-group] > [data-ui-input-root],
+  [data-ui-input-group] [data-ui-input-control] {
+    display: contents !important;
+  }
+
+  [data-ui-input-group] > :not([data-ui-input-root]):not([data-ui-input-control]) {
+    cursor: default;
+    user-select: none;
+  }
+}

package/src/components/radio/styles.css

@@ -0,0 +1,112 @@
+@layer components {
+  [data-ui-radio]:has([data-ui-radio-input]:focus-visible) {
+    box-shadow: var(--shadow-focus);
+  }
+
+  [data-ui-radio-group][data-variant="cards"] > [data-ui-radio],
+  [data-ui-radio][data-variant="cards"] {
+    align-items: flex-start !important;
+    background-color: var(--color-surface-panel);
+    border-radius: var(--radius-4) !important;
+    box-shadow: var(--shadow-border);
+    display: flex !important;
+    flex: 1 1 0;
+    gap: var(--spacing-3);
+    padding: 1rem !important;
+    width: auto !important;
+  }
+
+  [data-ui-radio-group][data-variant="pills"] > [data-ui-radio],
+  [data-ui-radio][data-variant="pills"] {
+    align-items: center !important;
+    background-color: color-mix(in srgb, currentColor 10%, transparent);
+    border-radius: var(--radius-full) !important;
+    box-shadow: none;
+    color: var(--color-foreground-muted);
+    display: inline-flex !important;
+    flex: 0 0 auto;
+    min-height: var(--ui-control-height-md);
+    padding: 0 0.625rem !important;
+    width: auto !important;
+  }
+
+  [data-ui-radio-group][data-variant="pills"] > [data-ui-radio][data-checked],
+  [data-ui-radio][data-variant="pills"][data-checked] {
+    background-color: var(--color-base-12);
+    color: var(--color-base-1) !important;
+    box-shadow: var(--shadow-1);
+  }
+
+  [data-ui-radio-group][data-variant="pills"] > [data-ui-radio][data-checked]:hover:not([data-disabled]),
+  [data-ui-radio][data-variant="pills"][data-checked]:hover:not([data-disabled]) {
+    background-color: var(--color-base-12);
+    box-shadow: var(--shadow-1);
+  }
+
+  [data-ui-radio-group][data-variant="pills"] [data-ui-radio-indicator],
+  [data-ui-radio][data-variant="pills"] [data-ui-radio-indicator] {
+    display: none !important;
+  }
+
+  [data-ui-radio-group][data-variant="cards"] > [data-ui-radio][data-invalid],
+  [data-ui-radio][data-variant="cards"][data-invalid] {
+    background-color: var(--color-danger-surface);
+    box-shadow: 0 0 0 1px var(--color-danger-border);
+  }
+
+  [data-ui-radio-group][data-indicator="false"] [data-ui-radio-indicator],
+  [data-ui-radio][data-indicator="false"] [data-ui-radio-indicator] {
+    display: none !important;
+  }
+
+  [data-ui-radio-group][data-placement="trailing"] [data-ui-radio-indicator],
+  [data-ui-radio][data-placement="trailing"] > [data-ui-radio-indicator] {
+    margin-left: auto;
+    order: 10;
+  }
+
+  [data-ui-radio-group][data-placement="center"] [data-ui-radio-indicator],
+  [data-ui-radio][data-placement="center"] > [data-ui-radio-indicator] {
+    left: 50%;
+    margin: 0;
+    position: absolute;
+    top: 50%;
+    transform: translate(-50%, -50%);
+  }
+
+  [data-ui-radio-group][data-placement="top-leading"] [data-ui-radio-indicator],
+  [data-ui-radio][data-placement="top-leading"] > [data-ui-radio-indicator],
+  [data-ui-radio-group][data-placement="top-trailing"] [data-ui-radio-indicator],
+  [data-ui-radio][data-placement="top-trailing"] > [data-ui-radio-indicator],
+  [data-ui-radio-group][data-placement="bottom-leading"] [data-ui-radio-indicator],
+  [data-ui-radio][data-placement="bottom-leading"] > [data-ui-radio-indicator],
+  [data-ui-radio-group][data-placement="bottom-trailing"] [data-ui-radio-indicator],
+  [data-ui-radio][data-placement="bottom-trailing"] > [data-ui-radio-indicator] {
+    margin: 0;
+    position: absolute;
+  }
+
+  [data-ui-radio-group][data-placement="top-leading"] [data-ui-radio-indicator],
+  [data-ui-radio][data-placement="top-leading"] > [data-ui-radio-indicator] {
+    left: 0.75rem;
+    top: 0.75rem;
+  }
+
+  [data-ui-radio-group][data-placement="top-trailing"] [data-ui-radio-indicator],
+  [data-ui-radio][data-placement="top-trailing"] > [data-ui-radio-indicator] {
+    right: 0.75rem;
+    top: 0.75rem;
+  }
+
+  [data-ui-radio-group][data-placement="bottom-leading"] [data-ui-radio-indicator],
+  [data-ui-radio][data-placement="bottom-leading"] > [data-ui-radio-indicator] {
+    bottom: 0.75rem;
+    left: 0.75rem;
+  }
+
+  [data-ui-radio-group][data-placement="bottom-trailing"] [data-ui-radio-indicator],
+  [data-ui-radio][data-placement="bottom-trailing"] > [data-ui-radio-indicator] {
+    bottom: 0.75rem;
+    right: 0.75rem;
+  }
+}

package/src/components/scroll-area/styles.css

@@ -0,0 +1,27 @@
+@layer components {
+  [data-ui-scroll-area][data-size="md"] {
+    --ui-scrollbar-size: 0.5rem;
+  }
+
+  [data-ui-scroll-area-viewport] {
+    max-height: inherit;
+    max-width: inherit;
+  }
+
+  [data-ui-scroll-area-viewport][data-hide-native] {
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+  }
+
+  [data-ui-scroll-area-viewport][data-hide-native]::-webkit-scrollbar {
+    display: none;
+  }
+
+  [data-ui-scroll-area-scrollbar][data-orientation="vertical"] {
+    height: calc(100% - (var(--ui-scrollbar-inset) * 2));
+  }
+
+  [data-ui-scroll-area-scrollbar][data-orientation="horizontal"] {
+    width: calc(100% - (var(--ui-scrollbar-inset) * 2));
+  }
+}

package/src/components/select/styles.css

@@ -0,0 +1,51 @@
+@layer components {
+  [data-ui-select-popover]:has([data-ui-select-search]) {
+    grid-template-rows: auto minmax(0, 1fr);
+  }
+
+  [data-ui-select-popover]:has([data-ui-select-search]) [data-ui-select-listbox] {
+    min-height: 0;
+    overflow: hidden;
+  }
+
+  [data-ui-select-option-label]:has(>*+*) {
+    display: grid;
+    gap: var(--spacing-1);
+    overflow: visible;
+    text-overflow: clip;
+    white-space: normal;
+  }
+
+  [data-ui-select-option-label]:has(>*+*) > * {
+    min-width: 0;
+    max-width: 100%;
+    overflow-wrap: break-word;
+    white-space: normal;
+  }
+
+  [data-ui-select][data-mark="none"] [data-ui-select-option-indicator] {
+    display: none;
+  }
+
+  [data-ui-select-native]:is(:hover, :active):not(:focus):not(:disabled):not([aria-invalid="true"]) {
+    --ui-control-shadow: var(--ui-control-shadow-hover);
+  }
+
+  [data-ui-select-native]:focus:not([aria-invalid="true"]) {
+    --ui-control-shadow: var(--ui-control-shadow-focus);
+    box-shadow: var(--shadow-control), var(--shadow-focus);
+  }
+
+  [data-ui-select-native][aria-invalid="true"] {
+    --ui-control-shadow: var(--ui-control-shadow-invalid);
+  }
+
+  [data-ui-select-native][aria-invalid="true"]:is(:hover, :active):not(:focus):not(:disabled) {
+    --ui-control-shadow: var(--ui-control-shadow-invalid-hover);
+  }
+
+  [data-ui-select-native][aria-invalid="true"]:focus {
+    --ui-control-shadow: var(--ui-control-shadow-invalid-focus);
+    box-shadow: var(--shadow-danger-focus);
+  }
+}

package/src/components/sidebar/styles.css

@@ -0,0 +1,10 @@
+@layer components {
+  [data-ui-sidebar-state-icon] [data-ui-sidebar-state-icon-when] {
+    display: none;
+  }
+
+  [data-ui-sidebar-state-icon][data-state="closed"] [data-ui-sidebar-state-icon-when="closed"],
+  [data-ui-sidebar-state-icon][data-state="open"] [data-ui-sidebar-state-icon-when="open"] {
+    display: block;
+  }
+}

package/src/components/toast/styles.css

@@ -0,0 +1,43 @@
+/*
+  Keep collapsed stack layout unlayered so these state selectors outrank the
+  outlet's generated utility classes without extra !important declarations.
+*/
+
+[data-ui-toast-outlet][data-stack="collapsed"] {
+  display: block;
+  height: var(--ui-toast-stack-height);
+}
+
+[data-ui-toast-outlet][data-stack="collapsed"][data-stack-expanded="true"] {
+  height: var(--ui-toast-stack-expanded-height);
+}
+
+[data-ui-toast-outlet][data-stack="collapsed"] > [data-ui-toast] {
+  inset-inline: 0;
+  position: absolute;
+  top: 0;
+  opacity: var(--ui-toast-stack-opacity, 1);
+  transform: translateY(var(--ui-toast-stack-offset, 0px)) scale(var(--ui-toast-stack-scale, 1));
+  transform-origin: top center;
+}
+
+[data-ui-toast-outlet][data-stack="collapsed"][data-position^="bottom"] > [data-ui-toast] {
+  bottom: 0;
+  top: auto;
+  transform-origin: bottom center;
+}
+
+[data-ui-toast-outlet][data-stack="collapsed"] > [data-ui-toast]:not(:first-child) {
+  height: var(--ui-toast-front-height);
+}
+
+[data-ui-toast-outlet][data-stack="collapsed"][data-stack-expanded="true"] > [data-ui-toast] {
+  height: auto;
+  opacity: 1;
+  position: relative;
+  transform: none;
+}
+
+[data-ui-toast-outlet][data-stack="collapsed"][data-stack-expanded="true"] > [data-ui-toast]:not(:first-child) {
+  margin-top: var(--spacing-2);
+}

package/src/components.css

@@ -0,0 +1,20 @@
+/*
+  Component CSS import point.
+
+  Add files here only when a component needs selectors or browser features that
+  TypeScript style recipes cannot express cleanly, such as pseudo-elements,
+  ::part(...), :has(...), native quirks, or child-order selectors.
+*/
+
+@import "./components/brand/styles.css";
+@import "./components/scroll-area/styles.css";
+@import "./components/select/styles.css";
+@import "./components/field/styles.css";
+@import "./components/radio/styles.css";
+@import "./components/date-picker/styles.css";
+@import "./components/file-upload/styles.css";
+@import "./components/button/styles.css";
+@import "./components/accordion/styles.css";
+@import "./components/toast/styles.css";
+@import "./components/input/styles.css";
+@import "./components/sidebar/styles.css";