VelvetKit

Previews

No matching results.

x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
<div class="flex max-w-xs flex-col gap-5">
  <div class="relative w-full" data-controller="ui--select" data-ui--select-multiple-value="false" data-ui--select-summary-value="%{count} selected" data-ui--select-placeholder-value="Choose…">
    <div class="mb-2"><label for="ui-select-b2d70a86" class="text-sm font-medium">sm</label>
    </div>
    <button type="button" id="ui-select-b2d70a86" class="flex w-full items-center justify-between gap-2 rounded-md border border-input bg-background text-left text-foreground shadow-xs transition-all focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-1 ring-offset-background aria-expanded:ring-2 aria-expanded:ring-primary aria-expanded:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-muted h-8 px-2.5 text-xs" role="combobox" aria-haspopup="listbox" aria-expanded="false" aria-controls="ui-select-b2d70a86-listbox" data-ui--select-target="trigger" data-action="click->ui--select#toggle keydown->ui--select#keydown">
      <span data-ui--select-target="value" class=" truncate">Weekly</span>
      <i data-lucide="chevrons-up-down" class="inline-block w-4 h-4 shrink-0 text-muted-foreground" aria-hidden="true"></i>
    </button>
    <div hidden="hidden" data-ui--select-target="panel" data-state="closed" class="z-50 min-w-32 overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95">
      <div id="ui-select-b2d70a86-listbox" role="listbox" tabindex="-1" aria-labelledby="ui-select-b2d70a86" data-ui--select-target="listbox" data-action="mousedown->ui--select#keepFocus" class="max-h-64 overflow-y-auto p-1">
        <div id="ui-select-b2d70a86-option-0" role="option" aria-selected="false" data-value="Daily" data-ui--select-target="option" data-action="click->ui--select#choose mousemove->ui--select#hover" class="relative flex cursor-default select-none items-center rounded-sm py-1.5 pr-8 pl-2 text-xs outline-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground aria-selected:font-medium ">
          <span class="truncate">Daily</span>
          <span class="absolute right-2 flex size-4 items-center justify-center text-primary dark:text-foreground" data-ui--select-target="check" hidden>
            <i data-lucide="check" class="inline-block shrink-0 w-4 h-4" aria-hidden="true"></i>
          </span>
        </div>
        
        <div id="ui-select-b2d70a86-option-1" role="option" aria-selected="true" data-value="Weekly" data-ui--select-target="option" data-action="click->ui--select#choose mousemove->ui--select#hover" class="relative flex cursor-default select-none items-center rounded-sm py-1.5 pr-8 pl-2 text-xs outline-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground aria-selected:font-medium ">
          <span class="truncate">Weekly</span>
          <span class="absolute right-2 flex size-4 items-center justify-center text-primary dark:text-foreground" data-ui--select-target="check" >
            <i data-lucide="check" class="inline-block shrink-0 w-4 h-4" aria-hidden="true"></i>
          </span>
        </div>
        
        <div id="ui-select-b2d70a86-option-2" role="option" aria-selected="false" data-value="Monthly" data-ui--select-target="option" data-action="click->ui--select#choose mousemove->ui--select#hover" class="relative flex cursor-default select-none items-center rounded-sm py-1.5 pr-8 pl-2 text-xs outline-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground aria-selected:font-medium ">
          <span class="truncate">Monthly</span>
          <span class="absolute right-2 flex size-4 items-center justify-center text-primary dark:text-foreground" data-ui--select-target="check" hidden>
            <i data-lucide="check" class="inline-block shrink-0 w-4 h-4" aria-hidden="true"></i>
          </span>
        </div>
      </div>
    </div>
    <select class="sr-only" tabindex="-1" aria-hidden="true" data-ui--select-target="native" name="size_sm">
      <option value="Daily">Daily</option>
      <option value="Weekly" selected="selected">Weekly</option>
      <option value="Monthly">Monthly</option>
    </select></div>
  <div class="relative w-full" data-controller="ui--select" data-ui--select-multiple-value="false" data-ui--select-summary-value="%{count} selected" data-ui--select-placeholder-value="Choose…">
    <div class="mb-2"><label for="ui-select-e4b721f6" class="text-sm font-medium">default</label>
    </div>
    <button type="button" id="ui-select-e4b721f6" class="flex w-full items-center justify-between gap-2 rounded-md border border-input bg-background text-left text-foreground shadow-xs transition-all focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-1 ring-offset-background aria-expanded:ring-2 aria-expanded:ring-primary aria-expanded:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-muted h-9 px-3 text-sm" role="combobox" aria-haspopup="listbox" aria-expanded="false" aria-controls="ui-select-e4b721f6-listbox" data-ui--select-target="trigger" data-action="click->ui--select#toggle keydown->ui--select#keydown">
      <span data-ui--select-target="value" class=" truncate">Weekly</span>
      <i data-lucide="chevrons-up-down" class="inline-block w-4 h-4 shrink-0 text-muted-foreground" aria-hidden="true"></i>
    </button>
    <div hidden="hidden" data-ui--select-target="panel" data-state="closed" class="z-50 min-w-32 overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95">
      <div id="ui-select-e4b721f6-listbox" role="listbox" tabindex="-1" aria-labelledby="ui-select-e4b721f6" data-ui--select-target="listbox" data-action="mousedown->ui--select#keepFocus" class="max-h-64 overflow-y-auto p-1">
        <div id="ui-select-e4b721f6-option-0" role="option" aria-selected="false" data-value="Daily" data-ui--select-target="option" data-action="click->ui--select#choose mousemove->ui--select#hover" class="relative flex cursor-default select-none items-center rounded-sm py-1.5 pr-8 pl-2 text-sm outline-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground aria-selected:font-medium ">
          <span class="truncate">Daily</span>
          <span class="absolute right-2 flex size-4 items-center justify-center text-primary dark:text-foreground" data-ui--select-target="check" hidden>
            <i data-lucide="check" class="inline-block shrink-0 w-4 h-4" aria-hidden="true"></i>
          </span>
        </div>
        
        <div id="ui-select-e4b721f6-option-1" role="option" aria-selected="true" data-value="Weekly" data-ui--select-target="option" data-action="click->ui--select#choose mousemove->ui--select#hover" class="relative flex cursor-default select-none items-center rounded-sm py-1.5 pr-8 pl-2 text-sm outline-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground aria-selected:font-medium ">
          <span class="truncate">Weekly</span>
          <span class="absolute right-2 flex size-4 items-center justify-center text-primary dark:text-foreground" data-ui--select-target="check" >
            <i data-lucide="check" class="inline-block shrink-0 w-4 h-4" aria-hidden="true"></i>
          </span>
        </div>
        
        <div id="ui-select-e4b721f6-option-2" role="option" aria-selected="false" data-value="Monthly" data-ui--select-target="option" data-action="click->ui--select#choose mousemove->ui--select#hover" class="relative flex cursor-default select-none items-center rounded-sm py-1.5 pr-8 pl-2 text-sm outline-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground aria-selected:font-medium ">
          <span class="truncate">Monthly</span>
          <span class="absolute right-2 flex size-4 items-center justify-center text-primary dark:text-foreground" data-ui--select-target="check" hidden>
            <i data-lucide="check" class="inline-block shrink-0 w-4 h-4" aria-hidden="true"></i>
          </span>
        </div>
      </div>
    </div>
    <select class="sr-only" tabindex="-1" aria-hidden="true" data-ui--select-target="native" name="size_default">
      <option value="Daily">Daily</option>
      <option value="Weekly" selected="selected">Weekly</option>
      <option value="Monthly">Monthly</option>
    </select></div>
  <div class="relative w-full" data-controller="ui--select" data-ui--select-multiple-value="false" data-ui--select-summary-value="%{count} selected" data-ui--select-placeholder-value="Choose…">
    <div class="mb-2"><label for="ui-select-1ed9b337" class="text-sm font-medium">lg</label>
    </div>
    <button type="button" id="ui-select-1ed9b337" class="flex w-full items-center justify-between gap-2 rounded-md border border-input bg-background text-left text-foreground shadow-xs transition-all focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-1 ring-offset-background aria-expanded:ring-2 aria-expanded:ring-primary aria-expanded:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-muted h-10 px-4 text-base" role="combobox" aria-haspopup="listbox" aria-expanded="false" aria-controls="ui-select-1ed9b337-listbox" data-ui--select-target="trigger" data-action="click->ui--select#toggle keydown->ui--select#keydown">
      <span data-ui--select-target="value" class=" truncate">Weekly</span>
      <i data-lucide="chevrons-up-down" class="inline-block w-4 h-4 shrink-0 text-muted-foreground" aria-hidden="true"></i>
    </button>
    <div hidden="hidden" data-ui--select-target="panel" data-state="closed" class="z-50 min-w-32 overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95">
      <div id="ui-select-1ed9b337-listbox" role="listbox" tabindex="-1" aria-labelledby="ui-select-1ed9b337" data-ui--select-target="listbox" data-action="mousedown->ui--select#keepFocus" class="max-h-64 overflow-y-auto p-1">
        <div id="ui-select-1ed9b337-option-0" role="option" aria-selected="false" data-value="Daily" data-ui--select-target="option" data-action="click->ui--select#choose mousemove->ui--select#hover" class="relative flex cursor-default select-none items-center rounded-sm py-1.5 pr-8 pl-2 text-sm outline-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground aria-selected:font-medium ">
          <span class="truncate">Daily</span>
          <span class="absolute right-2 flex size-4 items-center justify-center text-primary dark:text-foreground" data-ui--select-target="check" hidden>
            <i data-lucide="check" class="inline-block shrink-0 w-4 h-4" aria-hidden="true"></i>
          </span>
        </div>
        
        <div id="ui-select-1ed9b337-option-1" role="option" aria-selected="true" data-value="Weekly" data-ui--select-target="option" data-action="click->ui--select#choose mousemove->ui--select#hover" class="relative flex cursor-default select-none items-center rounded-sm py-1.5 pr-8 pl-2 text-sm outline-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground aria-selected:font-medium ">
          <span class="truncate">Weekly</span>
          <span class="absolute right-2 flex size-4 items-center justify-center text-primary dark:text-foreground" data-ui--select-target="check" >
            <i data-lucide="check" class="inline-block shrink-0 w-4 h-4" aria-hidden="true"></i>
          </span>
        </div>
        
        <div id="ui-select-1ed9b337-option-2" role="option" aria-selected="false" data-value="Monthly" data-ui--select-target="option" data-action="click->ui--select#choose mousemove->ui--select#hover" class="relative flex cursor-default select-none items-center rounded-sm py-1.5 pr-8 pl-2 text-sm outline-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground aria-selected:font-medium ">
          <span class="truncate">Monthly</span>
          <span class="absolute right-2 flex size-4 items-center justify-center text-primary dark:text-foreground" data-ui--select-target="check" hidden>
            <i data-lucide="check" class="inline-block shrink-0 w-4 h-4" aria-hidden="true"></i>
          </span>
        </div>
      </div>
    </div>
    <select class="sr-only" tabindex="-1" aria-hidden="true" data-ui--select-target="native" name="size_lg">
      <option value="Daily">Daily</option>
      <option value="Weekly" selected="selected">Weekly</option>
      <option value="Monthly">Monthly</option>
    </select></div>
</div>
1
2
3
4
5
<div class="flex max-w-xs flex-col gap-5">
  <% %i[sm default lg].each do |size| %>
    <%= render(UI::Select.new(name: "size_#{size}", label: size.to_s, size: size, options: %w[Daily Weekly Monthly], selected: "Weekly")) %>
  <% end %>
</div>

No notes provided.

No params configured.