@asharca/ui 0.1.0

package/src/styles.css

@@ -0,0 +1,693 @@
+@source "../dist/**/*.js";
+@source "../node_modules/streamdown/dist/*.js";
+@source "../node_modules/@streamdown/code/dist/*.js";
+@source "../node_modules/@streamdown/mermaid/dist/*.js";
+@source "../../../streamdown/dist/*.js";
+@source "../../../@streamdown/code/dist/*.js";
+@source "../../../@streamdown/mermaid/dist/*.js";
+@source "./**/*.{ts,tsx}";
+
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+  --color-background: hsl(var(--background));
+  --color-foreground: hsl(var(--foreground));
+  --color-card: hsl(var(--card));
+  --color-card-foreground: hsl(var(--card-foreground));
+  --color-popover: hsl(var(--popover));
+  --color-popover-foreground: hsl(var(--popover-foreground));
+  --color-primary: hsl(var(--primary));
+  --color-primary-foreground: hsl(var(--primary-foreground));
+  --color-secondary: hsl(var(--secondary));
+  --color-secondary-foreground: hsl(var(--secondary-foreground));
+  --color-muted: hsl(var(--muted));
+  --color-muted-foreground: hsl(var(--muted-foreground));
+  --color-accent: hsl(var(--accent));
+  --color-accent-foreground: hsl(var(--accent-foreground));
+  --color-destructive: hsl(var(--destructive));
+  --color-destructive-foreground: hsl(var(--destructive-foreground));
+  --color-destructive-text: hsl(var(--destructive-text));
+  --color-border: hsl(var(--border));
+  --color-input: hsl(var(--input));
+  --color-ring: hsl(var(--ring));
+  --color-brand: hsl(var(--brand));
+  --color-brand-foreground: hsl(var(--brand-foreground));
+  --color-brand-soft: hsl(var(--brand-soft));
+  --color-shell: hsl(var(--shell));
+  --color-shell-foreground: hsl(var(--shell-foreground));
+  --color-warning: hsl(var(--warning));
+
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+}
+
+@keyframes tp-word-swap {
+  from {
+    opacity: 0;
+    transform: translateY(0.15em);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.tp-rotating-headline__word {
+  animation: tp-word-swap 220ms cubic-bezier(0.22, 1, 0.36, 1) both;
+}
+
+:is(
+  [data-toolplane-ui],
+  [data-chat-ui="chat-shell"],
+  [data-chat-ui="chat-thread"],
+  [data-chat-ui="conversation-sidebar"]
+) {
+  --background: var(--toolplane-ui-background, var(--chat-ui-background, 0 0% 100%));
+  --foreground: var(--toolplane-ui-foreground, var(--chat-ui-foreground, 0 0% 17%));
+  --card: var(--toolplane-ui-card, var(--chat-ui-card, 0 0% 100%));
+  --card-foreground: var(--toolplane-ui-card-foreground, var(--chat-ui-card-foreground, 0 0% 12%));
+  --popover: var(--toolplane-ui-popover, var(--chat-ui-popover, 0 0% 100%));
+  --popover-foreground: var(--toolplane-ui-popover-foreground, var(--chat-ui-popover-foreground, 0 0% 12%));
+  --primary: var(--toolplane-ui-primary, var(--chat-ui-primary, 0 0% 15%));
+  --primary-foreground: var(--toolplane-ui-primary-foreground, var(--chat-ui-primary-foreground, 0 0% 98%));
+  --secondary: var(--toolplane-ui-secondary, var(--chat-ui-secondary, 0 0% 95%));
+  --secondary-foreground: var(--toolplane-ui-secondary-foreground, var(--chat-ui-secondary-foreground, 0 0% 17%));
+  --muted: var(--toolplane-ui-muted, var(--chat-ui-muted, 0 0% 96%));
+  --muted-foreground: var(--toolplane-ui-muted-foreground, var(--chat-ui-muted-foreground, 0 0% 43%));
+  --accent: var(--toolplane-ui-accent, var(--chat-ui-accent, 0 0% 94%));
+  --accent-foreground: var(--toolplane-ui-accent-foreground, var(--chat-ui-accent-foreground, 0 0% 15%));
+  --destructive: var(--toolplane-ui-destructive, var(--chat-ui-destructive, 0 84.2% 60.2%));
+  --destructive-foreground: var(--toolplane-ui-destructive-foreground, var(--chat-ui-destructive-foreground, 0 0% 98%));
+  --destructive-text: var(--toolplane-ui-destructive-text, 0 72% 42%);
+  --border: var(--toolplane-ui-border, var(--chat-ui-border, 0 0% 88%));
+  --input: var(--toolplane-ui-input, var(--chat-ui-input, 0 0% 84%));
+  --ring: var(--toolplane-ui-ring, var(--chat-ui-ring, 142 58% 38%));
+  --brand: var(--toolplane-ui-brand, var(--chat-ui-brand, 142 58% 38%));
+  --brand-foreground: var(--toolplane-ui-brand-foreground, var(--chat-ui-brand-foreground, 0 0% 100%));
+  --brand-soft: var(--toolplane-ui-brand-soft, 137 56% 92%);
+  --shell: var(--toolplane-ui-shell, 0 0% 96.7%);
+  --shell-foreground: var(--toolplane-ui-shell-foreground, 0 0% 17%);
+  --warning: var(--toolplane-ui-warning, var(--chat-ui-warning, 37 92% 52%));
+  --radius: var(--toolplane-ui-radius, var(--chat-ui-radius, 0.625rem));
+}
+
+.dark :is(
+  [data-toolplane-ui],
+  [data-chat-ui="chat-shell"],
+  [data-chat-ui="chat-thread"],
+  [data-chat-ui="conversation-sidebar"]
+),
+:is(
+  [data-toolplane-ui],
+  [data-chat-ui="chat-shell"],
+  [data-chat-ui="chat-thread"],
+  [data-chat-ui="conversation-sidebar"]
+)[data-theme="dark"] {
+  --background: var(--toolplane-ui-background, var(--chat-ui-background, 0 0% 10%));
+  --foreground: var(--toolplane-ui-foreground, var(--chat-ui-foreground, 0 0% 93%));
+  --card: var(--toolplane-ui-card, var(--chat-ui-card, 0 0% 12%));
+  --card-foreground: var(--toolplane-ui-card-foreground, var(--chat-ui-card-foreground, 0 0% 96%));
+  --popover: var(--toolplane-ui-popover, var(--chat-ui-popover, 0 0% 17%));
+  --popover-foreground: var(--toolplane-ui-popover-foreground, var(--chat-ui-popover-foreground, 0 0% 96%));
+  --primary: var(--toolplane-ui-primary, var(--chat-ui-primary, 0 0% 93%));
+  --primary-foreground: var(--toolplane-ui-primary-foreground, var(--chat-ui-primary-foreground, 0 0% 12%));
+  --secondary: var(--toolplane-ui-secondary, var(--chat-ui-secondary, 0 0% 18%));
+  --secondary-foreground: var(--toolplane-ui-secondary-foreground, var(--chat-ui-secondary-foreground, 0 0% 96%));
+  --muted: var(--toolplane-ui-muted, var(--chat-ui-muted, 0 0% 17%));
+  --muted-foreground: var(--toolplane-ui-muted-foreground, var(--chat-ui-muted-foreground, 0 0% 68%));
+  --accent: var(--toolplane-ui-accent, var(--chat-ui-accent, 0 0% 20%));
+  --accent-foreground: var(--toolplane-ui-accent-foreground, var(--chat-ui-accent-foreground, 0 0% 96%));
+  --destructive: var(--toolplane-ui-destructive, var(--chat-ui-destructive, 0 62.8% 30.6%));
+  --destructive-foreground: var(--toolplane-ui-destructive-foreground, var(--chat-ui-destructive-foreground, 0 0% 98%));
+  --destructive-text: var(--toolplane-ui-destructive-text, 0 78% 72%);
+  --border: var(--toolplane-ui-border, var(--chat-ui-border, 0 0% 22%));
+  --input: var(--toolplane-ui-input, var(--chat-ui-input, 0 0% 25%));
+  --ring: var(--toolplane-ui-ring, var(--chat-ui-ring, 128 73% 67%));
+  --brand: var(--toolplane-ui-brand, var(--chat-ui-brand, 128 73% 67%));
+  --brand-foreground: var(--toolplane-ui-brand-foreground, var(--chat-ui-brand-foreground, 0 0% 12%));
+  --brand-soft: var(--toolplane-ui-brand-soft, 130 36% 18%);
+  --shell: var(--toolplane-ui-shell, 0 0% 14%);
+  --shell-foreground: var(--toolplane-ui-shell-foreground, 0 0% 96%);
+  --warning: var(--toolplane-ui-warning, var(--chat-ui-warning, 38 90% 58%));
+}
+
+@layer components {
+  .ui-input {
+    height: 2.25rem;
+    width: 100%;
+    border: 1px solid hsl(var(--input));
+    border-radius: calc(var(--radius) - 2px);
+    background: hsl(var(--background));
+    padding: 0 0.75rem;
+    color: hsl(var(--foreground));
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+    transition: border-color 160ms ease, background-color 160ms ease;
+  }
+
+  .ui-input::placeholder {
+    color: hsl(var(--muted-foreground));
+  }
+
+  .ui-input:focus,
+  .ui-input:focus-visible {
+    border-color: hsl(var(--ring));
+    box-shadow: none;
+    outline: none;
+  }
+
+  .ui-input:disabled {
+    cursor: not-allowed;
+    opacity: 0.6;
+  }
+
+  .ui-input[aria-invalid="true"] {
+    border-color: hsl(var(--destructive));
+  }
+
+  .ui-input-sm {
+    height: 2rem;
+    font-size: 0.75rem;
+  }
+
+  .ui-input-lg {
+    height: 2.75rem;
+  }
+
+  .ui-textarea {
+    min-height: 6rem;
+    width: 100%;
+    resize: vertical;
+    border: 1px solid hsl(var(--input));
+    border-radius: calc(var(--radius) - 2px);
+    background: hsl(var(--background));
+    padding: 0.625rem 0.75rem;
+    color: hsl(var(--foreground));
+    font-size: 0.875rem;
+    line-height: 1.5;
+  }
+
+  .ui-textarea::placeholder {
+    color: hsl(var(--muted-foreground));
+  }
+
+  .ui-textarea:focus-visible {
+    border-color: hsl(var(--ring));
+    outline: none;
+  }
+
+  .ui-textarea:disabled {
+    cursor: not-allowed;
+    opacity: 0.6;
+  }
+
+  .ui-textarea[aria-invalid="true"] {
+    border-color: hsl(var(--destructive));
+  }
+
+  .ui-checkbox,
+  .ui-radio {
+    width: 1rem;
+    height: 1rem;
+    flex: none;
+    accent-color: hsl(var(--brand));
+  }
+
+  .ui-checkbox:disabled,
+  .ui-radio:disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+
+  .ui-field {
+    display: grid;
+    gap: 0.375rem;
+  }
+
+  .ui-field-label {
+    color: hsl(var(--foreground));
+    font-size: 0.875rem;
+    font-weight: 500;
+  }
+
+  .ui-field-description {
+    color: hsl(var(--muted-foreground));
+    font-size: 0.75rem;
+  }
+
+  .ui-field-error {
+    color: hsl(var(--destructive-text));
+    font-size: 0.75rem;
+  }
+
+  .ui-input-search {
+    height: 3rem;
+    padding-left: 2.5rem;
+  }
+
+  .ui-input-icon {
+    padding-left: 2.25rem;
+  }
+
+  .ui-select {
+    position: relative;
+    display: block;
+    min-width: 0;
+  }
+
+  .ui-select-control {
+    display: block;
+    appearance: none;
+    padding-right: 2.5rem;
+  }
+
+  .ui-select-chevron {
+    pointer-events: none;
+    position: absolute;
+    top: 50%;
+    right: 0.75rem;
+    width: 1rem;
+    height: 1rem;
+    transform: translateY(-50%);
+    color: hsl(var(--muted-foreground));
+  }
+
+  .ui-page {
+    margin-inline: auto;
+    width: 100%;
+    max-width: 96rem;
+    padding: 1.75rem 2rem 2.5rem;
+  }
+
+  .ui-panel {
+    border: 1px solid hsl(var(--border));
+    border-radius: var(--radius);
+    background: hsl(var(--card));
+    box-shadow: none;
+  }
+
+  .ui-panel-danger {
+    border-color: hsl(var(--destructive) / 0.38);
+  }
+
+  .ui-panel-muted {
+    border: 1px solid hsl(var(--border));
+    border-radius: var(--radius);
+    background: color-mix(in hsl, hsl(var(--card)) 78%, hsl(var(--muted)) 22%);
+  }
+
+  .ui-empty {
+    display: flex;
+    min-height: 16rem;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    border: 1px dashed hsl(var(--border));
+    border-radius: calc(var(--radius) + 0.25rem);
+    background: hsl(var(--card));
+    padding: 3rem 1.5rem;
+    text-align: center;
+  }
+
+  .ui-chip {
+    display: inline-flex;
+    min-height: 2rem;
+    flex-shrink: 0;
+    align-items: center;
+    border: 1px solid hsl(var(--border));
+    border-radius: 999px;
+    padding: 0 0.75rem;
+    color: hsl(var(--muted-foreground));
+    font-size: 0.875rem;
+    font-weight: 600;
+    white-space: nowrap;
+    transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
+  }
+
+  .ui-chip:hover {
+    border-color: hsl(var(--ring) / 0.55);
+    color: hsl(var(--foreground));
+  }
+
+  .ui-chip-active {
+    border-color: hsl(var(--brand));
+    background: hsl(var(--brand-soft));
+    color: hsl(var(--accent-foreground));
+  }
+
+  .ui-table {
+    width: 100%;
+    min-width: 40rem;
+    text-align: left;
+    font-size: 0.875rem;
+  }
+
+  .ui-table thead {
+    border-bottom: 1px solid hsl(var(--border));
+    background: hsl(var(--muted) / 0.58);
+    color: hsl(var(--muted-foreground));
+    font-size: 0.75rem;
+    letter-spacing: 0;
+  }
+
+  .ui-table tbody tr {
+    transition: background-color 160ms ease;
+  }
+
+  .ui-table tbody tr:hover {
+    background: hsl(var(--accent) / 0.62);
+  }
+
+  .ui-button-primary,
+  .ui-button-secondary,
+  .ui-button-ghost {
+    display: inline-flex;
+    min-height: 2.25rem;
+    align-items: center;
+    justify-content: center;
+    gap: 0.375rem;
+    border-radius: calc(var(--radius) - 2px);
+    padding: 0 0.875rem;
+    font-size: 0.875rem;
+    font-weight: 600;
+    line-height: 1;
+    transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease;
+  }
+
+  .ui-button-primary:focus-visible,
+  .ui-button-secondary:focus-visible,
+  .ui-button-ghost:focus-visible {
+    outline: 2px solid hsl(var(--ring));
+    outline-offset: 2px;
+  }
+
+  .ui-button-primary:disabled,
+  .ui-button-secondary:disabled,
+  .ui-button-ghost:disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+
+  .ui-button-primary {
+    border: 1px solid hsl(var(--primary));
+    background: hsl(var(--primary));
+    color: hsl(var(--primary-foreground));
+    box-shadow: 0 1px 2px hsl(var(--foreground) / 0.08);
+  }
+
+  .ui-button-primary:hover:not(:disabled) {
+    border-color: color-mix(in hsl, hsl(var(--primary)) 88%, hsl(var(--background)) 12%);
+    background: color-mix(in hsl, hsl(var(--primary)) 88%, hsl(var(--background)) 12%);
+  }
+
+  .ui-button-secondary {
+    border: 1px solid transparent;
+    background: hsl(var(--secondary));
+    color: hsl(var(--foreground));
+  }
+
+  .ui-button-secondary:hover:not(:disabled) {
+    border-color: transparent;
+    background: color-mix(in hsl, hsl(var(--secondary)) 82%, hsl(var(--foreground)) 18%);
+    color: hsl(var(--foreground));
+  }
+
+  .ui-button-danger {
+    border-color: hsl(var(--destructive));
+    background: hsl(var(--destructive));
+    color: hsl(var(--destructive-foreground));
+  }
+
+  .ui-button-danger:hover:not(:disabled) {
+    border-color: color-mix(in hsl, hsl(var(--destructive)) 88%, black 12%);
+    background: color-mix(in hsl, hsl(var(--destructive)) 88%, black 12%);
+    color: hsl(var(--destructive-foreground));
+  }
+
+  .ui-button-danger-secondary {
+    border-color: hsl(var(--destructive-text, var(--destructive)) / 0.42);
+    background: hsl(var(--card));
+    color: hsl(var(--destructive-text, var(--destructive)));
+  }
+
+  .ui-button-danger-secondary:hover:not(:disabled) {
+    border-color: hsl(var(--destructive-text, var(--destructive)) / 0.62);
+    background: hsl(var(--destructive) / 0.09);
+    color: hsl(var(--destructive-text, var(--destructive)));
+  }
+
+  .ui-button-ghost {
+    border: 1px solid transparent;
+    background: transparent;
+    color: hsl(var(--muted-foreground));
+  }
+
+  .ui-button-ghost:hover:not(:disabled) {
+    background: hsl(var(--accent));
+    color: hsl(var(--foreground));
+  }
+
+  .ui-button-sm {
+    min-height: 2rem;
+    padding: 0 0.625rem;
+    font-size: 0.75rem;
+  }
+
+  .ui-button-lg {
+    min-height: 2.75rem;
+    padding-inline: 1rem;
+  }
+
+  .ui-icon-button {
+    width: 2.25rem;
+    padding: 0;
+  }
+
+  .ui-icon-button-sm {
+    width: 2rem;
+  }
+
+  .ui-icon-button-lg {
+    width: 2.75rem;
+  }
+
+  .tp-search-input {
+    position: relative;
+    min-width: 0;
+  }
+
+  .tp-search-input__icon {
+    pointer-events: none;
+    position: absolute;
+    top: 50%;
+    left: 0.625rem;
+    z-index: 1;
+    width: 0.875rem;
+    height: 0.875rem;
+    transform: translateY(-50%);
+    color: hsl(var(--muted-foreground));
+  }
+
+  .tp-search-input__control {
+    padding-left: 2rem;
+    padding-right: 2.25rem;
+  }
+
+  .tp-search-input__control::-webkit-search-cancel-button {
+    appearance: none;
+  }
+
+  .tp-search-input__clear {
+    position: absolute;
+    top: 50%;
+    right: 0.25rem;
+    min-height: 1.75rem;
+    width: 1.75rem;
+    transform: translateY(-50%);
+  }
+
+  .tp-chat-shell {
+    display: flex;
+    height: 100%;
+    min-height: 0;
+    overflow: hidden;
+    background: hsl(var(--background));
+    color: hsl(var(--foreground));
+  }
+
+  .tp-chat-shell__grid {
+    display: grid;
+    min-height: 0;
+    width: 100%;
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .tp-chat-shell__sidebar,
+  .tp-chat-shell__main,
+  .tp-chat-shell__right-panel {
+    min-height: 0;
+    min-width: 0;
+    overflow: hidden;
+    background: hsl(var(--background));
+  }
+
+  .tp-chat-shell__sidebar,
+  .tp-chat-shell__main {
+    flex-direction: column;
+  }
+
+  [data-mobile-pane="sidebar"] .tp-chat-shell__sidebar,
+  [data-mobile-pane="chat"] .tp-chat-shell__main {
+    display: flex;
+  }
+
+  [data-mobile-pane="chat"] .tp-chat-shell__sidebar,
+  [data-mobile-pane="sidebar"] .tp-chat-shell__main,
+  .tp-chat-shell__right-panel {
+    display: none;
+  }
+
+  .tp-chat-shell__sidebar-slot,
+  .tp-chat-shell__content {
+    min-height: 0;
+    flex: 1;
+    overflow: hidden;
+  }
+
+  .tp-chat-shell__content {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .tp-chat-shell__header {
+    display: flex;
+    min-height: 2.75rem;
+    flex: none;
+    align-items: center;
+    gap: 0.375rem;
+    padding: 0 0.625rem;
+  }
+
+  .tp-chat-shell__sidebar-mobile-toolbar {
+    display: flex;
+    min-height: 2.75rem;
+    flex: none;
+    align-items: center;
+    justify-content: flex-end;
+    padding: 0 0.625rem;
+  }
+
+  .tp-chat-shell__header-slot {
+    display: flex;
+    min-width: 0;
+    flex: 1;
+    align-items: center;
+    justify-content: space-between;
+    gap: 0.75rem;
+  }
+
+  .tp-chat-shell__toggle {
+    display: inline-flex;
+    width: 1.875rem;
+    height: 1.875rem;
+    min-height: 1.875rem;
+    flex: none;
+    align-items: center;
+    justify-content: center;
+    border: 0;
+    border-radius: calc(var(--radius) - 2px);
+    background: transparent;
+    padding: 0;
+    color: hsl(var(--muted-foreground));
+    cursor: pointer;
+  }
+
+  .tp-chat-shell__toggle:hover {
+    background: hsl(var(--muted));
+    color: hsl(var(--foreground));
+  }
+
+  .tp-chat-shell__toggle:focus-visible {
+    outline: 2px solid hsl(var(--ring));
+    outline-offset: 2px;
+  }
+
+  .tp-chat-shell__toggle-icon {
+    width: 1.125rem;
+    height: 1.125rem;
+  }
+
+  .tp-chat-shell__toggle--desktop {
+    display: none;
+  }
+
+  @media (min-width: 1024px) {
+    .tp-chat-shell[data-sidebar-open="true"] .tp-chat-shell__grid {
+      grid-template-columns: var(--chat-ui-sidebar-width, 15rem) minmax(0, 1fr);
+    }
+
+    .tp-chat-shell[data-sidebar-open="true"] .tp-chat-shell__sidebar,
+    .tp-chat-shell .tp-chat-shell__main {
+      display: flex;
+    }
+
+    .tp-chat-shell[data-sidebar-open="false"] .tp-chat-shell__sidebar {
+      display: none;
+    }
+
+    .tp-chat-shell__sidebar-mobile-toolbar,
+    .tp-chat-shell__toggle--mobile {
+      display: none;
+    }
+
+    .tp-chat-shell__toggle--desktop {
+      display: inline-flex;
+    }
+
+  }
+
+  @media (min-width: 1280px) {
+    .tp-chat-shell[data-right-panel-open="true"] .tp-chat-shell__grid {
+      grid-template-columns: minmax(0, 1fr) var(--chat-ui-right-panel-width, 20rem);
+    }
+
+    .tp-chat-shell[data-sidebar-open="true"][data-right-panel-open="true"] .tp-chat-shell__grid {
+      grid-template-columns: var(--chat-ui-sidebar-width, 15rem) minmax(0, 1fr) var(--chat-ui-right-panel-width, 20rem);
+    }
+
+    .tp-chat-shell[data-right-panel-open="true"] .tp-chat-shell__right-panel {
+      display: flex;
+      flex-direction: column;
+      border-left: 1px solid hsl(var(--border));
+    }
+  }
+
+  @media (pointer: coarse), (max-width: 640px) {
+    .ui-button-primary,
+    .ui-button-secondary,
+    .ui-button-ghost,
+    .ui-button-sm {
+      min-height: 2.75rem;
+    }
+
+    .ui-icon-button,
+    .ui-icon-button-sm {
+      width: 2.75rem;
+    }
+
+    .tp-search-input__clear {
+      min-height: 2rem;
+      width: 2rem;
+    }
+
+    .ui-page {
+      padding: 1rem;
+    }
+
+    .ui-chip {
+      min-height: 2.75rem;
+    }
+  }
+}