diff --git a/apps/docs/content/docs/develop/(transistory-assistance)/ta-select.mdx b/apps/docs/content/docs/develop/(transistory-assistance)/ta-select.mdx index 6335542d..5eaac709 100644 --- a/apps/docs/content/docs/develop/(transistory-assistance)/ta-select.mdx +++ b/apps/docs/content/docs/develop/(transistory-assistance)/ta-select.mdx @@ -2,5 +2,573 @@ title: Select description: Explore the integrated accessibility testing tools in our development environment that help identify and resolve accessibility issues during development. These tools work together to ensure our components meet WCAG standards and provide a better experience for all users. --- +import { Tab, Tabs } from "fumadocs-ui/components/tabs"; +import IframeThemePreview from "@/components/iframe-theme-preview"; -## Work In Progress \ No newline at end of file + + + + + + ```tsx +
+ +
+ +
+ +
+
Apple
+
Banana
+
Blueberry
+
Grapes
+
Pineapple
+
+
+
+ + +
+ +
+ +
+
Apple
+
Banana
+
Blueberry
+
Grapes
+
Pineapple
+
+
+
+
+
+ +
+ +
+ +
+
+ +
+ +
+ +
+
Apple
+
Banana
+
Blueberry
+
Grapes
+
Pineapple
+
+
+
+
+ +
+ +
+ +
+ +
+
Apple
+
Banana
+
Blueberry
+
Grapes
+
Pineapple
+
+
+
+ +
+ +
+ +
+
Apple
+
Banana
+
Blueberry
+
Grapes
+
Pineapple
+
+
+
+ +
+ +
+ +
+
Apple
+
Banana
+
Blueberry
+
Grapes
+
Pineapple
+
+
+
+
+ ``` + + + ```tsx + /* Select Component Styles */ + .dark body { + height: 100%; + background-color: #161619; + } + + .select-wrapper { + display: inline-block; + position: relative; + margin: 1rem; + } + + .select-label { + display: block; + font-size: 0.875rem; + font-weight: 500; + margin-bottom: 0.5rem; + color: #3f3f46; + } + + .dark .select-label { + color: #fafafa; + } + + /* Custom Select Container */ + .custom-select { + position: relative; + /* width: 200px; */ + } + + /* Select Trigger Button */ + .select-trigger { + width: 100%; + display: flex; + align-items: center; + /* justify-content: space-between; */ + background-color: #ffffff; + border: 1px solid #e4e4e7; + border-radius: 0.375rem; + color: #18181b; + cursor: pointer; + font-family: inherit; + font-size: 0.875rem; + font-weight: 400; + outline: none; + /* padding: 0.5rem 0.75rem; */ + padding: 6px 10px; + transition: all 0.15s ease; + text-align: center; + } + + .dark .select-trigger { + background-color: #27272a; + border-color: #52525b; + color: #fafafa; + } + + /* Value text */ + .select-name { + margin-right: 6px; + color: rgb(var(--txt-black-500)); + font-weight: 400; + color: #6B6B74; + } + + .dark .select-name { + color: #A1A1AA; + } + + .select-value { + flex: 1; + color: rgb(var(--txt-black-900)); + padding-right: 6px; + font-weight: 500; + } + + .select-value.has-value { + color: #18181B; + } + + .dark .select-value.has-value { + color: #fff; + } + + /* Dropdown Menu */ + .select-dropdown { + position: absolute; + top: calc(100% + 0.25rem); + left: 0; + right: 0; + background-color: #ffffff; + border: 1px solid #e4e4e7; + border-radius: 0.375rem; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); + max-height: 200px; + overflow-y: auto; + opacity: 0; + visibility: hidden; + transform: translateY(-8px); + transition: all 0.2s ease; + z-index: 1000; + } + + .dark .select-dropdown { + /* background-color: #27272a; + border-color: #3f3f46; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2); */ + border-radius: var(--Gap-8, 8px); + border: 1px solid var(--Outline-otl-gray-200, #27272A); + background: var(--Background-bg-dialog, #1D1D21); + box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.05), 0 12px 50px 0 rgba(0, 0, 0, 0.10); + } + + .custom-select.open .select-dropdown { + opacity: 1; + visibility: visible; + transform: translateY(0); + } + + /* Dropdown Options */ + .select-option { + cursor: pointer; + transition: background-color 0.15s ease; + + overflow: hidden; + color: var(--Text-txt-black-700, #3F3F46); + text-overflow: ellipsis; + + display: flex; + padding: 5px 10px; + align-items: center; + gap: 8px; + align-self: stretch; + } + + .dark .select-option { + color: #fafafa; + } + + .select-option:hover { + background-color: #f4f4f5; + } + + .dark .select-option:hover { + background-color: #3f3f46; + } + + .select-option.selected { + /* background: var(--Background-bg-washed-active, #F4F4F5); */ + background: var(--Background-bg-washed-active, #F4F4F5); + /* color: #F4F4F5; */ + font-weight: 500; + border-radius: 4px; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M2 10C2 5.58172 5.58172 2 10 2C14.4183 2 18 5.58172 18 10C18 14.4183 14.4183 18 10 18C5.58172 18 2 14.4183 2 10ZM13.6233 7.91709C13.8537 7.57285 13.7614 7.10703 13.4171 6.87666C13.0729 6.64628 12.6071 6.73859 12.3767 7.08283L9.08932 11.995C8.99765 12.132 8.80084 12.1443 8.69278 12.0199L7.56633 10.7225C7.29476 10.4098 6.82106 10.3764 6.5083 10.6479C6.19553 10.9195 6.16213 11.3932 6.43369 11.706L7.56015 13.0033C8.31656 13.8745 9.69424 13.7881 10.3359 12.8293L13.6233 7.91709Z' fill='%231E90FF'/%3E%3C/svg%3E"); + /* background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='16' height='16'%3E%3Cpath fill='%231E90FF' d='M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2zm3.243 6.757L11 13l-1.243-1.243a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4a1 1 0 00-1.414-1.414z'/%3E%3C/svg%3E"); */ + background-repeat: no-repeat; + background-position: right 10px center; /* Position on the right side */ + background-size: 16px 16px; /* Adjust size as needed */ + } + + .dark .select-option.selected { + background: var(--Background-bg-washed-active, #3f3f46); + /* color: #272727; */ + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M2 10C2 5.58172 5.58172 2 10 2C14.4183 2 18 5.58172 18 10C18 14.4183 14.4183 18 10 18C5.58172 18 2 14.4183 2 10ZM13.6233 7.91709C13.8537 7.57285 13.7614 7.10703 13.4171 6.87666C13.0729 6.64628 12.6071 6.73859 12.3767 7.08283L9.08932 11.995C8.99765 12.132 8.80084 12.1443 8.69278 12.0199L7.56633 10.7225C7.29476 10.4098 6.82106 10.3764 6.5083 10.6479C6.19553 10.9195 6.16213 11.3932 6.43369 11.706L7.56015 13.0033C8.31656 13.8745 9.69424 13.7881 10.3359 12.8293L13.6233 7.91709Z' fill='%231E90FF'/%3E%3C/svg%3E"); + background-repeat: no-repeat; + background-position: right 10px center; + background-size: 16px 16px; + } + + .select-option.disabled { + background-color: #f4f4f5; + color: #a1a1aa; + pointer-events: none; + opacity: 0.6; /* Optional: adds a "disabled" appearance */ + cursor: not-allowed; /* Optional: changes the cursor */ + } + .dark .select-option.disabled { + background-color: #18181b; + color: #52525b; + } + + .select-small .select-option { + /* Body/XS/500 */ + font-size: 12px; + } + + .select-medium .select-option{ + font-size: 14px; + } + + .select-large .select-option { + font-size: 16px; + } + + /* Hover states for trigger */ + .select-trigger:hover { + border-color: #a1a1aa; + } + + .dark .select-trigger:hover { + border-color: #71717a; + } + + /* Focus state */ + .custom-select.open .select-trigger { + border-color: #2563eb; + box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1); + } + + .dark .custom-select.open .select-trigger { + border-color: #3b82f6; + box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2); + } + + /* Size variants */ + .select-small .select-trigger { + font-size: 14px; + padding: 6px 10px; + } + + .select-medium .select-trigger { + font-size: 16px; + padding: 8px 12px; + } + + .select-large .select-trigger { + font-size: 18px; + padding: 10px 16px; + } + + /* Ghost variant */ + .select-ghost .select-trigger { + background-color: transparent; + border: 1px solid transparent; + } + + .dark .select-ghost .select-trigger { + background-color: transparent; + border-color: transparent; + } + + .select-ghost .select-trigger:hover { + background-color: #f4f4f5; + border: 1px solid transparent; + border-color: #e4e4e7; + } + + .dark .select-ghost .select-trigger:hover { + background-color: #27272a; + border-color: #3f3f46; + } + + .select-ghost.open .select-trigger { + background-color: #ffffff; + border-color: #2563eb; + } + + .dark .select-ghost.open .select-trigger { + background-color: #27272a; + border-color: #3b82f6; + } + + /* Disabled state */ + .custom-select.disabled .select-trigger { + background-color: #f4f4f5; + /* border-color: #e4e4e7; */ + color: #a1a1aa; + cursor: not-allowed; + opacity: 0.6; + } + + .dark .custom-select.disabled .select-trigger { + background-color: #18181b; + /* border-color: #3f3f46; */ + color: #52525b; + } + + .custom-select.disabled .select-value { + color: #a1a1aa; + } + + .dark .custom-select.disabled .select-value { + color: #52525b; + } + + .dark .select-label { + color: #fafafa; + } + + /* Size variants */ + .select-small { + font-size: 14px; + } + + .select-medium { + font-size: 16px; + } + + .select-large { + font-size: 18px; + } + + /* Filled variant */ + .select-filled { + background-color: #f4f4f5; + border: 1px solid transparent; + } + + .dark .select-filled { + background-color: #18181b; + border-color: transparent; + } + + .select-filled:hover { + background-color: #e4e4e7; + } + + .dark .select-filled:hover { + background-color: #27272a; + } + + /* Ghost variant */ + .select-ghost { + background-color: transparent; + border: 1px solid transparent; + } + + .dark .select-ghost { + background-color: transparent; + border-color: transparent; + } + + .select-ghost:focus { + background-color: #ffffff; + border-color: #2563eb; + } + + .dark .select-ghost:focus { + background-color: #27272a; + border-color: #3b82f6; + } + ``` + + + ```tsx + // Custom Select Dropdown functionality + document.addEventListener('DOMContentLoaded', function () { + const customSelects = document.querySelectorAll('.custom-select'); + + customSelects.forEach(select => { + const trigger = select.querySelector('.select-trigger'); + const dropdown = select.querySelector('.select-dropdown'); + const options = select.querySelectorAll('.select-option'); + const valueDisplay = select.querySelector('.select-value'); + + // Toggle dropdown + trigger.addEventListener('click', function (e) { + e.stopPropagation(); + const isDisabled = select.classList.contains('disabled'); + if (isDisabled) return; + + // Close other dropdowns + document.querySelectorAll('.custom-select').forEach(s => { + if (s !== select) s.classList.remove('open'); + }); + + select.classList.toggle('open'); + }); + + // Select option + options.forEach(option => { + option.addEventListener('click', function (e) { + e.stopPropagation(); + const value = this.dataset.value; + const text = this.textContent; + + // Update selected state + options.forEach(opt => opt.classList.remove('selected')); + this.classList.add('selected'); + + // Update display + valueDisplay.textContent = text; + valueDisplay.classList.add('has-value'); + + // Close dropdown + select.classList.remove('open'); + }); + }); + }); + + // Close dropdowns when clicking outside + document.addEventListener('click', function () { + document.querySelectorAll('.custom-select').forEach(select => { + select.classList.remove('open'); + }); + }); + }); + ``` + + diff --git a/apps/docs/public/assets/ta-preview/callout/callout.css b/apps/docs/public/assets/ta-preview/callout/callout.css new file mode 100644 index 00000000..a562084b --- /dev/null +++ b/apps/docs/public/assets/ta-preview/callout/callout.css @@ -0,0 +1,124 @@ +/* Simplified Callout Component Styles */ + +/* for porting into documentation */ +html, +body { + height: 100%; + background-color: white; +} +.dark body { + height: 100%; + background-color: #161619; +} + +/* Callout Container */ +.callout { + display: flex; + align-items: flex-start; + gap: 0.5rem; + padding: 0.75rem; + border-radius: 0.375rem; + background-color: #eff6ff; + /* Light blue background */ + color: #2563eb; + /* Blue text */ +} + +/* Dark mode */ +.dark .callout { + background-color: #172554; + /* Dark blue background */ + color: #93c5fd; + /* Light blue text */ +} + +/* Icon */ +.callout-icon { + width: 1.25rem; + height: 1.25rem; + flex-shrink: 0; +} + +/* Content Container */ +.callout-content { + display: flex; + flex-direction: column; + flex-grow: 1; + gap: 0.5rem; +} + +.callout-row { + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-between; +} + +/* Text Container */ +.callout-text { + display: flex; + flex-direction: column; + gap: 0.25rem; +} + +/* Title */ +.callout-title { + font-size: .875rem; + line-height: 1.25rem; + font-weight: 600; + color: inherit; +} + +/* Description */ +.callout-description { + font-weight: 400; + font-size: .875rem; + line-height: 1.25rem; + color: #18181b; + /* Dark gray */ +} + +.dark .callout-description { + color: #ffffff; + /* White in dark mode */ +} + +/* Action Container */ +.callout-action { + margin-top: 0.25rem; +} + +/* Callout Variants */ + +/* Success Variant */ +.callout-success { + background-color: #f0fdf4; + color: #15803d; +} + +.dark .callout-success { + background-color: #14532d; + color: #86efac; +} + +/* Warning Variant */ +.callout-warning { + background-color: #fefce8; + color: #a16207; +} + +.dark .callout-warning { + background-color: #422006; + color: #fde047; +} + +/* Danger Variant */ +.callout-danger { + background-color: #fef2f2; + color: #b91c1c; +} + +.dark .callout-danger { + background-color: #450a0a; + color: #fca5a5; +} \ No newline at end of file diff --git a/apps/docs/public/assets/ta-preview/callout/ta-callout-preview.html b/apps/docs/public/assets/ta-preview/callout/ta-callout-preview.html new file mode 100644 index 00000000..bb5fce00 --- /dev/null +++ b/apps/docs/public/assets/ta-preview/callout/ta-callout-preview.html @@ -0,0 +1,147 @@ + + + + + + Simple Callout Example + + + + + + + + + + + +
+
+ + + +
+
+

Basic Callout with Title and Content

+

+ Online services will be down for maintenance on Saturday from 10 PM to 2 AM. Thank you for your patience! +

+
+
+
+
+ +
+
+ + + +
+
+

Callout with Button

+

+ Online services will be down for maintenance on Saturday from 10 PM to 2 AM. Thank you for your patience! +

+
+
+ + +
+
+
+
+ +
+
+ + + +
+

Callout with Close Button

+ +
+
+
+ +
+
+ + + +
+
+

Success Variant

+

Your changes have been saved successfully.

+
+
+
+
+ +
+
+ + + +
+
+

Warning Variant

+

Please review your information before proceeding.

+
+
+
+
+ +
+
+ + + +
+
+

Danger Variant

+

An error occurred. Please try again later.

+
+
+
+
+ + + + \ No newline at end of file diff --git a/apps/docs/public/assets/ta-preview/select/select.css b/apps/docs/public/assets/ta-preview/select/select.css new file mode 100644 index 00000000..2eed0fe9 --- /dev/null +++ b/apps/docs/public/assets/ta-preview/select/select.css @@ -0,0 +1,345 @@ +/* Select Component Styles */ +.dark body { + height: 100%; + background-color: #161619; +} + +.select-wrapper { + display: inline-block; + position: relative; + margin: 1rem; +} + +.select-label { + display: block; + font-size: 0.875rem; + font-weight: 500; + margin-bottom: 0.5rem; + color: #3f3f46; +} + +.dark .select-label { + color: #fafafa; +} + +/* Custom Select Container */ +.custom-select { + position: relative; + /* width: 200px; */ +} + +/* Select Trigger Button */ +.select-trigger { + width: 100%; + display: flex; + align-items: center; + /* justify-content: space-between; */ + background-color: #ffffff; + border: 1px solid #e4e4e7; + border-radius: 0.375rem; + color: #18181b; + cursor: pointer; + font-family: inherit; + font-size: 0.875rem; + font-weight: 400; + outline: none; + /* padding: 0.5rem 0.75rem; */ + padding: 6px 10px; + transition: all 0.15s ease; + text-align: center; +} + +.dark .select-trigger { + background-color: #27272a; + border-color: #52525b; + color: #fafafa; +} + +/* Value text */ +.select-name { + margin-right: 6px; + color: rgb(var(--txt-black-500)); + font-weight: 400; + color: #6B6B74; +} + +.dark .select-name { + color: #A1A1AA; +} + +.select-value { + flex: 1; + color: rgb(var(--txt-black-900)); + padding-right: 6px; + font-weight: 500; +} + +.select-value.has-value { + color: #18181B; +} + +.dark .select-value.has-value { + color: #fff; +} + +/* Dropdown Menu */ +.select-dropdown { + position: absolute; + top: calc(100% + 0.25rem); + left: 0; + right: 0; + background-color: #ffffff; + border: 1px solid #e4e4e7; + border-radius: 0.375rem; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); + max-height: 200px; + overflow-y: auto; + opacity: 0; + visibility: hidden; + transform: translateY(-8px); + transition: all 0.2s ease; + z-index: 1000; + padding: 5px 0; +} + +.dark .select-dropdown { + /* background-color: #27272a; + border-color: #3f3f46; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2); */ + border-radius: var(--Gap-8, 8px); + border: 1px solid var(--Outline-otl-gray-200, #27272A); + background: var(--Background-bg-dialog, #1D1D21); + box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.05), 0 12px 50px 0 rgba(0, 0, 0, 0.10); +} + +.custom-select.open .select-dropdown { + opacity: 1; + visibility: visible; + transform: translateY(0); +} + +/* Dropdown Options */ +.select-option { + cursor: pointer; + transition: background-color 0.15s ease; + + overflow: hidden; + color: var(--Text-txt-black-700, #3F3F46); + text-overflow: ellipsis; + + display: flex; + padding: 6px 10px; + align-items: center; + gap: 8px; + align-self: stretch; +} + +.dark .select-option { + /* color: #fafafa; */ + overflow: hidden; + color: var(--Text-txt-black-700, #D4D4D8); + text-overflow: ellipsis; +} + +.select-option:hover { + background-color: #f4f4f5; +} + +.dark .select-option:hover { + background-color: #3f3f46; +} + +.select-option.selected { + /* background: var(--Background-bg-washed-active, #F4F4F5); */ + background: var(--Background-bg-washed-active, #F4F4F5); + /* color: #F4F4F5; */ + font-weight: 500; + border-radius: 4px; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M2 10C2 5.58172 5.58172 2 10 2C14.4183 2 18 5.58172 18 10C18 14.4183 14.4183 18 10 18C5.58172 18 2 14.4183 2 10ZM13.6233 7.91709C13.8537 7.57285 13.7614 7.10703 13.4171 6.87666C13.0729 6.64628 12.6071 6.73859 12.3767 7.08283L9.08932 11.995C8.99765 12.132 8.80084 12.1443 8.69278 12.0199L7.56633 10.7225C7.29476 10.4098 6.82106 10.3764 6.5083 10.6479C6.19553 10.9195 6.16213 11.3932 6.43369 11.706L7.56015 13.0033C8.31656 13.8745 9.69424 13.7881 10.3359 12.8293L13.6233 7.91709Z' fill='%231E90FF'/%3E%3C/svg%3E"); + /* background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='16' height='16'%3E%3Cpath fill='%231E90FF' d='M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2zm3.243 6.757L11 13l-1.243-1.243a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4a1 1 0 00-1.414-1.414z'/%3E%3C/svg%3E"); */ + background-repeat: no-repeat; + background-position: right 10px center; /* Position on the right side */ + background-size: 16px 16px; /* Adjust size as needed */ +} + +.dark .select-option.selected { + background: var(--Background-bg-washed-active, #3f3f46); + /* color: #272727; */ + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M2 10C2 5.58172 5.58172 2 10 2C14.4183 2 18 5.58172 18 10C18 14.4183 14.4183 18 10 18C5.58172 18 2 14.4183 2 10ZM13.6233 7.91709C13.8537 7.57285 13.7614 7.10703 13.4171 6.87666C13.0729 6.64628 12.6071 6.73859 12.3767 7.08283L9.08932 11.995C8.99765 12.132 8.80084 12.1443 8.69278 12.0199L7.56633 10.7225C7.29476 10.4098 6.82106 10.3764 6.5083 10.6479C6.19553 10.9195 6.16213 11.3932 6.43369 11.706L7.56015 13.0033C8.31656 13.8745 9.69424 13.7881 10.3359 12.8293L13.6233 7.91709Z' fill='%231E90FF'/%3E%3C/svg%3E"); + background-repeat: no-repeat; + background-position: right 10px center; + background-size: 16px 16px; +} + +.select-option.disabled { + background-color: #f4f4f5; + color: #a1a1aa; + pointer-events: none; + opacity: 0.6; /* Optional: adds a "disabled" appearance */ + cursor: not-allowed; /* Optional: changes the cursor */ +} +.dark .select-option.disabled { + background-color: #18181b; + color: #52525b; +} + +.select-small .select-option { + /* Body/XS/500 */ + font-size: 12px; +} + +.select-medium .select-option{ + font-size: 14px; +} + +.select-large .select-option { + font-size: 16px; +} + +/* Hover states for trigger */ +.select-trigger:hover { + border-color: #a1a1aa; +} + +.dark .select-trigger:hover { + border-color: #71717a; +} + +/* Focus state */ +.custom-select.open .select-trigger { + border-color: #2563eb; + box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1); +} + +.dark .custom-select.open .select-trigger { + border-color: #3b82f6; + box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2); +} + +/* Size variants */ +.select-small .select-trigger { + font-size: 14px; + padding: 6px 10px; +} + +.select-medium .select-trigger { + font-size: 16px; + padding: 8px 12px; +} + +.select-large .select-trigger { + font-size: 18px; + padding: 10px 16px; +} + +/* Ghost variant */ +.select-ghost .select-trigger { + background-color: transparent; + border: 1px solid transparent; +} + +.dark .select-ghost .select-trigger { + background-color: transparent; + border-color: transparent; +} + +.select-ghost .select-trigger:hover { + background-color: #f4f4f5; + border: 1px solid transparent; + border-color: #e4e4e7; +} + +.dark .select-ghost .select-trigger:hover { + background-color: #27272a; + border-color: #3f3f46; +} + +.select-ghost.open .select-trigger { + background-color: #ffffff; + border-color: #2563eb; +} + +.dark .select-ghost.open .select-trigger { + background-color: #27272a; + border-color: #3b82f6; +} + +/* Disabled state */ +.custom-select.disabled .select-trigger { + background-color: #f4f4f5; + /* border-color: #e4e4e7; */ + color: #a1a1aa; + cursor: not-allowed; + opacity: 0.6; +} + +.dark .custom-select.disabled .select-trigger { + background-color: #18181b; + /* border-color: #3f3f46; */ + color: #52525b; +} + +.custom-select.disabled .select-value { + color: #a1a1aa; +} + +.dark .custom-select.disabled .select-value { + color: #52525b; +} + +.dark .select-label { + color: #fafafa; +} + +/* Size variants */ +.select-small { + font-size: 14px; +} + +.select-medium { + font-size: 16px; +} + +.select-large { + font-size: 18px; +} + +/* Filled variant */ +.select-filled { + background-color: #f4f4f5; + border: 1px solid transparent; +} + +.dark .select-filled { + background-color: #18181b; + border-color: transparent; +} + +.select-filled:hover { + background-color: #e4e4e7; +} + +.dark .select-filled:hover { + background-color: #27272a; +} + +/* Ghost variant */ +.select-ghost { + background-color: transparent; + border: 1px solid transparent; +} + +.dark .select-ghost { + background-color: transparent; + border-color: transparent; +} + +.select-ghost:focus { + background-color: #ffffff; + border-color: #2563eb; +} + +.dark .select-ghost:focus { + background-color: #27272a; + border-color: #3b82f6; +} diff --git a/apps/docs/public/assets/ta-preview/select/select.js b/apps/docs/public/assets/ta-preview/select/select.js new file mode 100644 index 00000000..8d1b6bfc --- /dev/null +++ b/apps/docs/public/assets/ta-preview/select/select.js @@ -0,0 +1,53 @@ + +// Custom Select Dropdown functionality +document.addEventListener('DOMContentLoaded', function () { + const customSelects = document.querySelectorAll('.custom-select'); + + customSelects.forEach(select => { + const trigger = select.querySelector('.select-trigger'); + // const dropdown = select.querySelector('.select-dropdown'); + const options = select.querySelectorAll('.select-option'); + const valueDisplay = select.querySelector('.select-value'); + + // Toggle dropdown + trigger.addEventListener('click', function (e) { + e.stopPropagation(); + const isDisabled = select.classList.contains('disabled'); + if (isDisabled) return; + + // Close other dropdowns + document.querySelectorAll('.custom-select').forEach(s => { + if (s !== select) s.classList.remove('open'); + }); + + select.classList.toggle('open'); + }); + + // Select option + options.forEach(option => { + option.addEventListener('click', function (e) { + e.stopPropagation(); + // const value = this.dataset.value; + const text = this.textContent; + + // Update selected state + options.forEach(opt => opt.classList.remove('selected')); + this.classList.add('selected'); + + // Update display + valueDisplay.textContent = text; + valueDisplay.classList.add('has-value'); + + // Close dropdown + select.classList.remove('open'); + }); + }); + }); + + // Close dropdowns when clicking outside + document.addEventListener('click', function () { + document.querySelectorAll('.custom-select').forEach(select => { + select.classList.remove('open'); + }); + }); +}); \ No newline at end of file diff --git a/apps/docs/public/assets/ta-preview/select/ta-select-preview.html b/apps/docs/public/assets/ta-preview/select/ta-select-preview.html new file mode 100644 index 00000000..b8df0472 --- /dev/null +++ b/apps/docs/public/assets/ta-preview/select/ta-select-preview.html @@ -0,0 +1,211 @@ + + + + + + Select Component Example + + + + + + + + + +
+
+ +
+ +
+ +
+
Apple
+
Banana
+
Blueberry
+
Grapes
+
Pineapple
+
+
+
+ + +
+ +
+ +
+
Apple
+
Banana
+
Blueberry
+
Grapes
+
Pineapple
+
+
+
+ +
+
+ +
+ +
+ +
+
+ +
+ +
+ +
+
Apple
+
Banana
+
Blueberry
+
Grapes
+
Pineapple
+
+
+
+
+ +
+ +
+ +
+ +
+
Apple
+
Banana
+
Blueberry
+
Grapes
+
Pineapple
+
+
+
+ +
+ +
+ +
+
Apple
+
Banana
+
Blueberry
+
Grapes
+
Pineapple
+
+
+
+ +
+ +
+ +
+
Apple
+
Banana
+
Blueberry
+
Grapes
+
Pineapple
+
+
+
+
+ + + \ No newline at end of file