1. 1
2. 2
3. 3
4. 4
5. 5
6. 6
7. 7
8. 8
9. 9
10. 10

import { DatePicker } from "@gunkin/uiify";

export default function Example() {
  return (
    <div>
      <label htmlFor="start-date">Start date</label>
      <DatePicker className="" id="start-date" name="startDate" defaultValue="2026-10-19" />
    </div>
  );
}

1. 1
2. 2
3. 3
4. 4
5. 5
6. 6
7. 7
8. 8
9. 9
10. 10
11. 11
12. 12
13. 13
14. 14
15. 15
16. 16
17. 17
18. 18
19. 19
20. 20
21. 21
22. 22
23. 23
24. 24
25. 25
26. 26
27. 27
28. 28
29. 29
30. 30
31. 31
32. 32
33. 33
34. 34
35. 35
36. 36
37. 37
38. 38
39. 39
40. 40

@layer components {
  [data-uiify-date-picker] {
    display: block;
    inline-size: 100%;
    min-inline-size: 12rem;
    max-inline-size: 24rem;
    box-sizing: border-box;
    block-size: var(--uiify-control-size, var(--control-md));
    padding-block: 0;
    padding-inline: var(--space-lg);
    border: var(--border-width) solid var(--input);
    border-radius: var(--radius-full);
    background-color: var(--card);
    color: var(--foreground);
    font: inherit;
    font-size: var(--uiify-control-font, var(--text-base));
    line-height: var(--leading-normal);
    transition: var(--transition-colors);
  }

  [data-uiify-date-picker]:focus-visible {
    border-color: var(--primary);
    outline: var(--ring-width) solid var(--ring);
    outline-offset: 2px;
  }

  [data-uiify-date-picker][data-invalid],
  [data-uiify-date-picker]:user-invalid {
    border-color: var(--destructive);
  }

  [data-uiify-date-picker][data-invalid]:focus-visible {
    outline-color: var(--destructive);
  }

  [data-uiify-date-picker]:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }
}

1. 1
2. 2
3. 3
4. 4
5. 5
6. 6
7. 7
8. 8
9. 9
10. 10
11. 11
12. 12
13. 13
14. 14
15. 15
16. 16
17. 17
18. 18
19. 19
20. 20
21. 21
22. 22
23. 23
24. 24
25. 25
26. 26

import { DatePicker } from "@gunkin/uiify";

export default function Example() {
  return (
    <div>
      <label htmlFor="start-date">Start date</label>
      <DatePicker
        className="
          [&[data-positioning=native]]:[--uiify-anchor-offset:var(--space-sm)]
          [&_[data-positioning=native]]:[--uiify-anchor-offset:var(--space-sm)]
          [&[popover]:popover-open:not([data-positioning=native])]:[margin:revert]
          [&_[popover]:popover-open:not([data-positioning=native])]:[margin:revert] block w-full min-w-48 max-w-96
          box-border [block-size:var(--control-md)] py-0 px-lg border-[length:var(--border-width)] border-solid
          border-input rounded-full bg-card text-foreground [font-family:inherit] [font-size:var(--text-base)]
          [line-height:var(--leading-normal)] [transition:var(--transition-colors)] focus-visible:border-primary
          focus-visible:outline-[length:var(--ring-width)] focus-visible:outline-ring focus-visible:outline-offset-2
          data-[invalid]:border-destructive user-invalid:border-destructive
          data-[invalid]:focus-visible:outline-destructive disabled:opacity-50 disabled:cursor-not-allowed
        "
        id="start-date"
        name="startDate"
        defaultValue="2026-10-19"
      />
    </div>
  );
}