twntyx-css 1.0.0

package/styles/form-text-select.css

@@ -0,0 +1,411 @@
+/*----------------------------*/
+/* BASE INPUT STYLES */
+/*----------------------------*/
+
+/* Common base styles for inputs and selects */
+@utility input-text-select-base {
+  --input-text-select-height: 44px;
+  --input-text-select-border-radius: calc(var(--input-text-select-height) / 2);
+  @apply /* w-full */
+  text-sm
+  rounded-(--input-text-select-border-radius)
+  border
+  border-line-highlight
+  bg-core-ui-50
+  dark:bg-core-ui-900
+  include-active
+  text-text-default
+  min-h-(--input-text-select-height);
+
+  /* Placeholder styles */
+  &::placeholder,
+  & > input::placeholder,
+  & > select::placeholder {
+    @apply text-text-disabled;
+  }
+
+  /* Disabled state */
+  &:has(input:disabled),
+  &:has(select:disabled) {
+    @apply cursor-not-allowed bg-core-ui-100 dark:bg-core-ui-700 text-text-disabled active:outline-transparent;
+
+    > * {
+      @apply cursor-not-allowed;
+    }
+    &:hover {
+      @apply border-line-highlight;
+    }
+  }
+
+  &:has(input:not(:disabled):hover),
+  &:has(select:not(:disabled):hover) {
+    @apply border-line-strong;
+  }
+  &:has(input:disabled),
+  &:has(select:disabled) {
+    @apply border-line-default;
+  }
+
+  /* Read-only state */
+  &:has(input:read-only) {
+    @apply bg-core-ui-100 dark:bg-core-ui-700 active:outline-transparent;
+    &:hover {
+      @apply border-line-highlight;
+    }
+  }
+}
+
+/* Basic input/select styles */
+@utility input-text-select {
+  @apply flex-1 px-4 py-2 w-full input-text-select-base;
+}
+
+@utility input-text {
+  @apply overflow-hidden flex-1 content-center min-h-[calc(var(--input-text-select-height)-2px)];
+  > span {
+    @apply truncate;
+  }
+}
+
+@utility input-select {
+  @apply overflow-hidden flex-1 content-center min-h-[calc(var(--input-text-select-height)-2px)];
+  > span {
+    @apply truncate;
+  }
+}
+
+/* Required indicator */
+.input-required::after {
+  @apply content-['*'] ml-1 text-text-error;
+}
+
+/* Helper text */
+@utility input-helper {
+  @apply mt-1.5 text-sm text-text-tertiary;
+}
+
+/* Error state */
+@utility input-error {
+  @apply border-line-error focus:border-line-error focus:ring-line-error/20;
+}
+
+/* Textarea specific styles */
+@utility input-textarea {
+  @apply flex-1 resize min-h-[calc(var(--input-text-select-height)-2px)];
+
+  &:not(.input-resize-none) {
+    field-sizing: content;
+  }
+
+  &.input-resize-none {
+    @apply resize-none;
+  }
+
+  &.input-resize-y {
+    @apply resize-y;
+  }
+
+  &.input-resize-x {
+    @apply resize-x;
+  }
+
+  &.input-autosize {
+    @apply overflow-hidden;
+    /* Add auto-resize functionality if needed */
+  }
+}
+
+/* Standalone modifiers for safe @apply usage */
+@utility input-chevron {
+  &::after {
+    @apply content-['']
+    transition-transform
+    include-transition
+    bg-line-focus/75
+    mask-carat
+    size-5
+    m-auto
+    mr-2;
+  }
+
+  &:has(input:focus),
+  &:has(select:focus),
+  &.is-active {
+    &::after {
+      @apply -rotate-180 bg-line-focus;
+    }
+  }
+}
+
+@utility input-ghost {
+  @apply bg-transparent border-transparent shadow-none;
+
+  &:hover {
+    @apply border-transparent;
+  }
+
+  &:focus-within {
+    @apply border-transparent shadow-none;
+  }
+
+  &.is-active,
+  &:has(input:focus),
+  &:has(select:focus),
+  &:has(textarea:focus) {
+    @apply bg-core-black/5 dark:bg-core-white/5 border-line-default;
+  }
+
+  .input-text,
+  .input-select {
+    @apply bg-transparent;
+  }
+
+  &:hover .input-text,
+  &:hover .input-select {
+    @apply bg-core-ui-100/0 dark:bg-core-ui-800/0;
+  }
+}
+
+@utility input-rounded-md {
+  --input-text-select-border-radius: 0.375rem; /* 6px */
+}
+
+/*----------------------------*/
+/* INPUT CONTROL COMPONENTS */
+/*----------------------------*/
+
+@utility input-control {
+  @apply flex gap-0 items-stretch p-0 input-text-select-base;
+
+  /* Size modifiers */
+  &.input-xs {
+    --input-text-select-height: 20px;
+    @apply text-xs;
+  }
+  &.input-sm {
+    --input-text-select-height: 32px;
+    @apply text-sm;
+  }
+  &.input-lg {
+    --input-text-select-height: 56px;
+  }
+
+  /* State modifiers */
+  &.has-error {
+    @apply border-line-error bg-background-error/25 text-text-error;
+  }
+  &.has-success {
+    @apply border-line-success bg-background-success/25 text-text-success;
+  }
+  &.has-info {
+    @apply border-line-info bg-background-info/25 text-text-info;
+  }
+  &.has-warning {
+    @apply border-line-warning bg-background-warning/25 text-text-warning;
+  }
+  &.has-attention {
+    @apply bg-background-brand/10 border-brand-moderate text-brand-strong;
+  }
+
+  /* Border radius handling for first/last elements */
+  > .input-addon,
+  > .input-text,
+  > .input-select {
+    &:first-child {
+      @apply rounded-l-(--input-text-select-border-radius);
+    }
+    &:last-child {
+      @apply rounded-r-(--input-text-select-border-radius);
+    }
+  }
+
+  /* Input and select styling within control */
+  .input-text,
+  .input-select {
+    @apply leading-(--input-text-select-height) px-[calc(var(--input-text-select-height)/4)] bg-transparent border-none;
+    &:focus {
+      @apply outline-hidden;
+    }
+  }
+
+  &.is-active,
+  &:has(input:focus),
+  &:has(select:focus),
+  &:has(textarea:focus) {
+    @apply border-line-focus;
+  }
+
+  &:not(.input-divide) {
+    > .input-text,
+    > .input-select {
+      &:not(:first-child) {
+        @apply pl-0;
+      }
+    }
+  }
+
+  &.input-divide {
+    @apply divide-x divide-solid divide-line-highlight;
+
+    &:has(input:not(:disabled):hover),
+    &:has(select:not(:disabled):hover) {
+      @apply divide-line-strong;
+    }
+
+    &:has(input:focus),
+    &:has(select:focus) {
+      @apply divide-line-focus;
+    }
+  }
+
+  /* Loading state */
+  &.is-loading {
+    @apply relative;
+    &::after {
+      @apply content-[''] shrink-0 my-auto loader-base size-[calc(var(--input-text-select-height)/2)]! mr-[calc(var(--input-text-select-height)/4.5)]!;
+    }
+  }
+
+  /* Addon styling */
+  .input-addon {
+    @apply text-text-tertiary;
+  }
+
+  /* Focus state addon color */
+  &:has(textarea:focus),
+  &:has(input:focus),
+  &:has(select:focus) {
+    .input-addon {
+      @apply text-text-default;
+    }
+  }
+
+  /* Active and hover states */
+  &:active {
+    @apply bg-transparent;
+  }
+
+  &:hover {
+    :where(input, select) {
+      &:not(:last-child) {
+        @apply border-line-strong;
+      }
+    }
+  }
+
+  /* Input with badges */
+  &:has(.badge) {
+    @apply flex-wrap;
+    .input-select,
+    .input-text {
+      @apply w-[inherit];
+    }
+    .input-addon:has(.badge) {
+      @apply flex-wrap gap-1 px-[calc(var(--input-text-select-height)/6)] my-1;
+
+      .badge {
+        @apply text-[10px] py-0.5;
+        &:has(button) {
+          @apply pr-1;
+        }
+      }
+      &:not(:empty) {
+        + .input-text {
+          @apply hidden;
+        }
+      }
+    }
+  }
+
+  /* Roundness variants */
+  &.input-rounded-none {
+    --input-text-select-border-radius: 0px;
+  }
+  &.input-rounded-sm {
+    --input-text-select-border-radius: 0.125rem; /* 2px */
+  }
+  &.input-rounded-lg {
+    --input-text-select-border-radius: 0.5rem; /* 8px */
+  }
+
+  /* Add textarea specific control styles */
+  > .input-textarea {
+    @apply px-[calc(var(--input-text-select-height)/4)] py-2 bg-transparent border-none leading-6;
+
+    &:focus {
+      @apply outline-hidden;
+    }
+  }
+}
+
+@utility input-addon {
+  @apply flex isolate items-center px-2 max-w-full text-text-secondary shrink-0;
+
+  &:has(select),
+  &:has(button:not(.button)) {
+    @apply px-0;
+  }
+
+  &:has(.button) {
+    @apply px-[calc(var(--input-text-select-height)/8)];
+  }
+
+  > select,
+  > button:not(.button) {
+    @apply h-full;
+  }
+
+  > select {
+    @apply bg-transparent;
+    &:focus {
+      @apply outline-1 outline-offset-0 outline-line-focus;
+    }
+  }
+
+  > button:not(.button) {
+    @apply px-4;
+    &:hover,
+    &:active {
+      @apply bg-core-ui-100 dark:bg-core-ui-800 text-text-default/60;
+    }
+  }
+
+  /* Border radius handling for buttons and selects */
+  &:first-child {
+    > select,
+    > button:not(.button) {
+      @apply rounded-l-(--input-text-select-border-radius);
+    }
+  }
+  &:last-child {
+    > select,
+    > button:not(.button) {
+      @apply rounded-r-(--input-text-select-border-radius);
+    }
+  }
+}
+
+/*----------------------------*/
+/* SELECT ELEMENT STYLING */
+/*----------------------------*/
+
+select {
+  @apply pr-8!
+  appearance-none
+  text-text-default
+  bg-no-repeat
+  bg-[url('data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2024%2024%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill%3D%22%23737373%22%20d%3D%22M11.9998%2014.677C11.8793%2014.677%2011.7671%2014.6578%2011.6633%2014.6193C11.5594%2014.5808%2011.4607%2014.5148%2011.367%2014.4213L6.87276%209.92701C6.73442%209.78851%206.66359%209.61443%206.66026%209.40476C6.65709%209.19526%206.72792%209.01801%206.87276%208.87301C7.01776%208.72818%207.19342%208.65576%207.39976%208.65576C7.60609%208.65576%207.78176%208.72818%207.92676%208.87301L11.9998%2012.9463L16.0728%208.87301C16.2113%208.73468%2016.3853%208.66385%2016.595%208.66051C16.8045%208.65735%2016.9818%208.72818%2017.1268%208.87301C17.2716%209.01801%2017.344%209.19368%2017.344%209.40001C17.344%209.60635%2017.2716%209.78201%2017.1268%209.92701L12.6325%2014.4213C12.5388%2014.5148%2012.4401%2014.5808%2012.3363%2014.6193C12.2324%2014.6578%2012.1203%2014.677%2011.9998%2014.677Z%22%2F%3E%3C%2Fsvg%3E')]
+  dark:bg-[url('data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2024%2024%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill%3D%22%23B9B9B9%22%20d%3D%22M11.9998%2014.677C11.8793%2014.677%2011.7671%2014.6578%2011.6633%2014.6193C11.5594%2014.5808%2011.4607%2014.5148%2011.367%2014.4213L6.87276%209.92701C6.73442%209.78851%206.66359%209.61443%206.66026%209.40476C6.65709%209.19526%206.72792%209.01801%206.87276%208.87301C7.01776%208.72818%207.19342%208.65576%207.39976%208.65576C7.60609%208.65576%207.78176%208.72818%207.92676%208.87301L11.9998%2012.9463L16.0728%208.87301C16.2113%208.73468%2016.3853%208.66385%2016.595%208.66051C16.8045%208.65735%2016.9818%208.72818%2017.1268%208.87301C17.2716%209.01801%2017.344%209.19368%2017.344%209.40001C17.344%209.60635%2017.2716%209.78201%2017.1268%209.92701L12.6325%2014.4213C12.5388%2014.5148%2012.4401%2014.5808%2012.3363%2014.6193C12.2324%2014.6578%2012.1203%2014.677%2011.9998%2014.677Z%22%2F%3E%3C%2Fsvg%3E')];
+  background-position: right 0.5rem center;
+  background-size: 20px;
+}
+
+/* Add to the dropdown styles */
+@utility dropdown-option {
+  @apply px-3 py-2 w-full text-left rounded-md hover:bg-background-surface-sunken;
+
+  /* Selected state (keyboard navigation) */
+  .is-selected & {
+    @apply bg-background-surface-sunken;
+  }
+}

package/styles/form.css

@@ -0,0 +1,86 @@
+/*----------------------------*/
+/* FORM */
+/*----------------------------*/
+
+.form-input {
+  @apply
+  items-center
+  px-4
+  py-2
+  w-full
+  rounded-full
+  border
+  transition-colors
+  cursor-pointer
+  bg-background-surface
+  border-line-default
+  focus:outline-hidden
+  focus:ring-0
+  disabled:cursor-not-allowed
+  disabled:hover:border-line-default
+  [&svg]:fill-text-tertiary
+  include-border-secondary
+  outline-2
+  outline-offset-2
+  outline-line-brand/0
+  ;
+}
+
+.input-group > input,
+.form-input {
+  @apply
+  text-sm
+  outline-hidden
+  min-h-11
+  ;
+}
+
+.input-group {
+  @apply
+  flex
+  items-center
+  rounded-full
+  include-border-secondary
+  *:relative
+  [&>*:not(input)]:z-10
+  [&>input]:z-0
+  [&>input]:bg-background-surface/0
+  [&>input]:border-none
+  [&>input]:flex-1
+  [&>input]:min-h-11
+  [&>input:first-child]:pl-4
+  [&>input:first-child]:rounded-s-full
+  [&>input:last-child]:pr-4
+  [&>input:last-child]:rounded-e-full
+  [&>input:focus]:ring-0
+  [&>.input-icon]:absolute
+  [&>.input-icon]:w-6
+  [&>.input-icon]:h-6
+  [&>.input-icon]:top-1/2
+  [&>.input-icon]:transform
+  [&>.input-icon]:-translate-y-1/2
+  [&>.input-icon:first-child]:left-3
+  [&>.input-icon:last-child]:right-3
+  [&>.input-icon:first-child+input]:pl-12
+  ;
+
+  &:has(input:focus-visible) {
+    @apply
+    border-line-focus
+    ;
+
+    > input {
+      @apply
+      ring-0
+      outline-hidden
+      ;
+    }
+  }
+  &:has(input:focus-within) {
+    @apply
+    outline-line-brand
+    interactive-base
+    ;
+  }
+
+}

package/styles/globals.css

@@ -0,0 +1,66 @@
+@import "tailwindcss";
+@import "./theme.css";
+
+@import "./colors.css";
+@import "./shared.css";
+
+@import "./ai.css";
+@import "./animation.css";
+@import "./avatar.css";
+@import "./background-ai.css";
+@import "./banner.css";
+@import "./breadcrumb.css";
+@import "./button.css";
+@import "./badge.css";
+@import "./card.css";
+@import "./chart-pie.css";
+@import "./chart-stacked.css";
+@import "./chat.css";
+@import "./checkmark.css";
+@import "./code.css";
+@import "./collapsible.css";
+@import "./countdown.css";
+@import "./datepicker.css";
+@import "./divider.css";
+@import "./drawer.css";
+@import "./empty-state.css";
+@import "./fieldset.css";
+@import "./field.css";
+@import "./dropdown.css";
+@import "./form-shared.css";
+@import "./form-checkbox-radio-toggle.css";
+@import "./form-fileupload.css";
+@import "./form-rangeslider.css";
+@import "./form-text-select.css";
+@import "./combobox.css";
+@import "./command.css";
+@import "./input-group.css";
+@import "./join.css";
+@import "./key-value.css";
+@import "./kbd.css";
+@import "./link.css";
+@import "./logotype.css";
+@import "./loader.css";
+@import "./menu.css";
+@import "./modal.css";
+@import "./navbar.css";
+@import "./pagination.css";
+@import "./panel.css";
+@import "./popover.css";
+@import "./progress.css";
+@import "./scrollbar.css";
+@import "./shadow.css";
+@import "./skeleton.css";
+@import "./state.css";
+@import "./stepper.css";
+@import "./steps.css";
+@import "./surface.css";
+@import "./tab.css";
+@import "./table.css";
+@import "./timeline.css";
+@import "./toast.css";
+@import "./tooltip.css";
+@import "./typography.css";
+@import "./utility.css";
+
+@import "./package-quill.css";

package/styles/input-group.css

@@ -0,0 +1,63 @@
+/*----------------------------*/
+/* INPUT GROUP */
+/*----------------------------*/
+
+@utility input-group {
+  @apply flex overflow-hidden rounded-(--input-text-select-border-radius) border border-line-highlight bg-background-surface;
+
+  &:has(> :where(input, select, textarea, .input-control, .input-group-control):focus-within) {
+    @apply border-line-focus;
+  }
+
+  &:has(> :where(input, select, textarea, .input-control, .input-group-control):hover) {
+    @apply border-line-strong;
+  }
+
+  > :where(input, select, textarea, .input-control, .input-group-control) {
+    @apply flex-1 min-w-0;
+  }
+
+  > :where(input, select, textarea) {
+    @apply w-full rounded-none border-0 bg-transparent;
+  }
+
+  > .input-group-control > :where(input, select, textarea, .input-control) {
+    @apply rounded-none border-0;
+  }
+
+  > :where(:not(input):not(select):not(textarea):not(.input-control):not(.input-group-control), .input-group-addon) {
+    @apply inline-flex gap-2 items-center px-3 text-sm text-text-tertiary bg-background-surface-elevated border-line-highlight;
+
+    &:first-child {
+      @apply border-r;
+    }
+
+    &:last-child {
+      @apply border-l;
+    }
+  }
+}
+
+/* Compatibility aliases */
+@utility input-group-addon {
+  @apply inline-flex gap-2 items-center px-3 text-sm text-text-tertiary bg-background-surface-elevated border-line-highlight;
+
+  &:first-child {
+    @apply border-r;
+  }
+
+  &:last-child {
+    @apply border-l;
+  }
+}
+
+@utility input-group-control {
+  @apply flex-1 min-w-0;
+
+  > input,
+  > select,
+  > textarea,
+  > .input-control {
+    @apply rounded-none border-0;
+  }
+}