@akbarsafari00/ods-react 0.1.0

package/dist/styles/globals.css

@@ -0,0 +1,660 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+@import "@fontsource-variable/geist";
+@import "./themes/ods-default.css";
+
+@custom-variant dark (&:is(.dark *));
+@source "../../../apps/**/*.{ts,tsx}";
+@source "../../../components/**/*.{ts,tsx}";
+@source "../**/*.{ts,tsx}";
+
+@theme inline {
+  --font-heading: var(--font-sans);
+  --color-sidebar-ring: var(--sidebar-ring);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar: var(--sidebar);
+  --color-chart-5: var(--chart-5);
+  --color-chart-4: var(--chart-4);
+  --color-chart-3: var(--chart-3);
+  --color-chart-2: var(--chart-2);
+  --color-chart-1: var(--chart-1);
+  --color-ring: var(--ring);
+  --color-input: var(--input);
+  --color-border: var(--border);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-success: var(--success);
+  --color-success-foreground: var(--success-foreground);
+  --color-warning: var(--warning);
+  --color-warning-foreground: var(--warning-foreground);
+  --color-info: var(--info);
+  --color-info-foreground: var(--info-foreground);
+  --color-surface: var(--surface);
+  --color-surface-muted: var(--surface-muted);
+  --color-surface-raised: var(--surface-raised);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-accent: var(--accent);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-muted: var(--muted);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-secondary: var(--secondary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-primary: var(--primary);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-popover: var(--popover);
+  --color-card-foreground: var(--card-foreground);
+  --color-card: var(--card);
+  --color-foreground: var(--foreground);
+  --color-background: var(--background);
+  --radius-sm: calc(var(--radius) * 0.6);
+  --radius-md: calc(var(--radius) * 0.8);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) * 1.4);
+  --radius-2xl: calc(var(--radius) * 1.8);
+  --radius-3xl: calc(var(--radius) * 2.2);
+  --radius-4xl: calc(var(--radius) * 2.6);
+  --font-sans: "Geist Variable", "Noto Sans Arabic", Tahoma, sans-serif;
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  html {
+    @apply bg-background;
+    scroll-behavior: smooth;
+  }
+  body {
+    @apply min-h-svh bg-background text-foreground antialiased;
+  }
+}
+
+[data-slot="dialog-overlay"][data-state="open"],
+[data-slot="alert-dialog-overlay"][data-state="open"],
+[data-slot="drawer-overlay"][data-state="open"] {
+  animation-name: ods-overlay-in;
+  animation-duration: var(--ods-motion-duration-enter);
+  animation-timing-function: var(--ods-motion-easing-enter);
+  animation-fill-mode: both;
+}
+
+[data-slot="dialog-overlay"][data-state="closed"],
+[data-slot="alert-dialog-overlay"][data-state="closed"],
+[data-slot="drawer-overlay"][data-state="closed"] {
+  animation-name: ods-overlay-out;
+  animation-duration: var(--ods-motion-duration-exit);
+  animation-timing-function: var(--ods-motion-easing-exit);
+  animation-fill-mode: both;
+}
+
+[data-slot="alert-dialog-content"] {
+  --ods-alert-dialog-inline-size: 32rem;
+  inset-block: auto 0;
+  inset-inline: 0;
+  width: 100%;
+  border-radius: var(--ods-radius-surface) var(--ods-radius-surface) 0 0;
+  will-change: transform, opacity;
+}
+
+[data-slot="alert-dialog-content"][data-size="compact"] {
+  --ods-alert-dialog-inline-size: 28rem;
+}
+
+[data-slot="alert-dialog-content"][data-state="open"] {
+  animation-name: ods-dialog-sheet-in;
+  animation-duration: var(--ods-motion-duration-enter);
+  animation-timing-function: var(--ods-motion-easing-enter);
+  animation-fill-mode: both;
+}
+
+[data-slot="alert-dialog-content"][data-state="closed"] {
+  animation-name: ods-dialog-sheet-out;
+  animation-duration: var(--ods-motion-duration-exit);
+  animation-timing-function: var(--ods-motion-easing-exit);
+  animation-fill-mode: both;
+}
+
+@media (min-width: 40rem) {
+  [data-slot="alert-dialog-content"] {
+    inset: auto;
+    inset-block: auto;
+    inset-inline: auto;
+    top: 50%;
+    left: 50%;
+    width: min(var(--ods-alert-dialog-inline-size), calc(100vw - 2rem));
+    border-radius: var(--ods-radius-surface);
+    transform: translate(-50%, -50%);
+  }
+
+  [data-slot="alert-dialog-content"][data-state="open"] {
+    animation-name: ods-dialog-modal-in;
+  }
+
+  [data-slot="alert-dialog-content"][data-state="closed"] {
+    animation-name: ods-dialog-modal-out;
+  }
+}
+
+[data-slot="dialog-content"] {
+  --ods-dialog-inline-size: 32rem;
+  inset-block: auto 0;
+  inset-inline: 0;
+  width: 100%;
+  border-radius: var(--ods-radius-surface) var(--ods-radius-surface) 0 0;
+  will-change: transform, opacity;
+}
+
+[data-slot="dialog-content"][data-size="compact"] {
+  --ods-dialog-inline-size: 24rem;
+}
+
+[data-slot="dialog-content"][data-size="wide"] {
+  --ods-dialog-inline-size: 40rem;
+}
+
+[data-slot="dialog-handle"] {
+  position: absolute;
+  inset-block-start: 0.5rem;
+  inset-inline-start: 50%;
+  width: 2.5rem;
+  height: 0.25rem;
+  border-radius: 9999px;
+  background: var(--border);
+  transform: translateX(-50%);
+}
+
+[data-slot="dialog-content"][data-state="open"] {
+  animation-name: ods-dialog-sheet-in;
+  animation-duration: var(--ods-motion-duration-enter);
+  animation-timing-function: var(--ods-motion-easing-enter);
+  animation-fill-mode: both;
+}
+
+[data-slot="dialog-content"][data-state="closed"] {
+  animation-name: ods-dialog-sheet-out;
+  animation-duration: var(--ods-motion-duration-exit);
+  animation-timing-function: var(--ods-motion-easing-exit);
+  animation-fill-mode: both;
+}
+
+@media (min-width: 40rem) {
+  [data-slot="dialog-content"] {
+    inset: auto;
+    inset-block: auto;
+    inset-inline: auto;
+    top: 50%;
+    left: 50%;
+    width: min(var(--ods-dialog-inline-size), calc(100vw - 2rem));
+    border-radius: var(--ods-radius-surface);
+    transform: translate(-50%, -50%);
+  }
+
+  [data-slot="dialog-handle"] {
+    display: none;
+  }
+
+  [data-slot="dialog-content"][data-state="open"] {
+    animation-name: ods-dialog-modal-in;
+  }
+
+  [data-slot="dialog-content"][data-state="closed"] {
+    animation-name: ods-dialog-modal-out;
+  }
+}
+
+[data-slot="drawer-content"] {
+  --ods-drawer-inline-size: 32rem;
+  --ods-drawer-motion-offset: 100%;
+  inset-block: 0;
+  width: min(var(--ods-drawer-inline-size), calc(100vw - 1rem));
+  touch-action: pan-y;
+  will-change: transform;
+}
+
+[data-slot="drawer-content"][data-width="narrow"] {
+  --ods-drawer-inline-size: 24rem;
+}
+
+[data-slot="drawer-content"][data-width="medium"] {
+  --ods-drawer-inline-size: 32rem;
+}
+
+[data-slot="drawer-content"][data-width="wide"] {
+  --ods-drawer-inline-size: 42rem;
+}
+
+[data-slot="drawer-content"][data-side="end"] {
+  inset-inline-end: 0;
+  border-inline-start: 1px solid var(--border);
+  border-start-start-radius: var(--ods-radius-surface);
+  border-end-start-radius: var(--ods-radius-surface);
+}
+
+[data-slot="drawer-content"][data-side="start"] {
+  --ods-drawer-motion-offset: -100%;
+  inset-inline-start: 0;
+  border-inline-end: 1px solid var(--border);
+  border-start-end-radius: var(--ods-radius-surface);
+  border-end-end-radius: var(--ods-radius-surface);
+}
+
+:dir(rtl)[data-slot="drawer-content"][data-side="end"] {
+  --ods-drawer-motion-offset: -100%;
+}
+
+:dir(rtl)[data-slot="drawer-content"][data-side="start"] {
+  --ods-drawer-motion-offset: 100%;
+}
+
+[data-slot="drawer-content"][data-state="open"] {
+  animation-name: ods-drawer-in;
+  animation-duration: var(--ods-motion-duration-panel-enter);
+  animation-timing-function: var(--ods-motion-easing-enter);
+  animation-fill-mode: both;
+}
+
+[data-slot="drawer-content"][data-state="closed"] {
+  animation-name: ods-drawer-out;
+  animation-duration: var(--ods-motion-duration-panel-exit);
+  animation-timing-function: var(--ods-motion-easing-exit);
+  animation-fill-mode: both;
+}
+
+[data-slot="collapsible-content"] {
+  will-change: height, opacity;
+}
+
+[data-slot="collapsible-content"][data-state="open"] {
+  animation-name: ods-collapsible-expand;
+  animation-duration: var(--ods-motion-duration-enter);
+  animation-timing-function: var(--ods-motion-easing-enter);
+  animation-fill-mode: both;
+}
+
+[data-slot="collapsible-content"][data-state="closed"] {
+  animation-name: ods-collapsible-collapse;
+  animation-duration: var(--ods-motion-duration-exit);
+  animation-timing-function: var(--ods-motion-easing-exit);
+  animation-fill-mode: both;
+}
+
+[data-slot="context-menu-content"] {
+  min-width: min(14rem, var(--radix-context-menu-content-available-width));
+  max-width: min(
+    20rem,
+    calc(100vw - 1rem),
+    var(--radix-context-menu-content-available-width)
+  );
+}
+
+[data-slot="context-menu-sub-content"] {
+  min-width: min(12rem, var(--radix-context-menu-content-available-width));
+  max-width: min(
+    20rem,
+    calc(100vw - 1rem),
+    var(--radix-context-menu-content-available-width)
+  );
+}
+
+[data-slot="context-menu-content"],
+[data-slot="context-menu-sub-content"] {
+  max-height: var(--radix-context-menu-content-available-height);
+  transform-origin: var(--radix-context-menu-content-transform-origin);
+  will-change: transform, opacity;
+}
+
+[data-slot="context-menu-content"][data-state="open"],
+[data-slot="context-menu-sub-content"][data-state="open"] {
+  animation-name: ods-menu-in;
+  animation-duration: var(--ods-motion-duration-feedback);
+  animation-timing-function: var(--ods-motion-easing-enter);
+  animation-fill-mode: both;
+}
+
+[data-slot="context-menu-content"][data-state="closed"],
+[data-slot="context-menu-sub-content"][data-state="closed"] {
+  animation-name: ods-menu-out;
+  animation-duration: var(--ods-motion-duration-exit);
+  animation-timing-function: var(--ods-motion-easing-exit);
+  animation-fill-mode: both;
+}
+
+[data-slot="tabs-content"][data-state="active"] {
+  animation-name: ods-tabs-content-in;
+  animation-duration: var(--ods-motion-duration-feedback);
+  animation-timing-function: var(--ods-motion-easing-enter);
+  animation-fill-mode: both;
+}
+
+[data-slot="skeleton"] {
+  position: relative;
+}
+
+[data-slot="skeleton"]::after {
+  position: absolute;
+  inset: 0;
+  content: "";
+  background: linear-gradient(
+    90deg,
+    transparent 0%,
+    color-mix(in oklab, var(--surface-raised) 70%, transparent) 50%,
+    transparent 100%
+  );
+  transform: translateX(-100%);
+  animation: ods-skeleton-wave 1.6s var(--ods-motion-easing-standard) infinite;
+}
+
+:dir(rtl) [data-slot="skeleton"]::after {
+  transform: translateX(100%);
+  animation-name: ods-skeleton-wave-rtl;
+}
+
+[data-slot="skeleton"][data-motion="pulse"],
+[data-slot="skeleton-group"][data-motion="pulse"] [data-slot="skeleton"] {
+  animation: ods-skeleton-pulse 1.6s ease-in-out infinite;
+}
+
+[data-slot="skeleton"][data-motion="pulse"]::after,
+[data-slot="skeleton-group"][data-motion="pulse"] [data-slot="skeleton"]::after,
+[data-slot="skeleton"][data-motion="none"]::after,
+[data-slot="skeleton-group"][data-motion="none"] [data-slot="skeleton"]::after {
+  display: none;
+}
+
+[data-slot="skeleton"][data-motion="none"],
+[data-slot="skeleton-group"][data-motion="none"] [data-slot="skeleton"] {
+  animation: none;
+}
+
+[data-slot="pagination-direction-icon"] {
+  transition: transform var(--ods-motion-duration-feedback)
+    var(--ods-motion-easing-standard);
+}
+
+:dir(rtl) [data-slot="pagination-direction-icon"] {
+  transform: rotate(180deg);
+}
+
+[data-slot="progress-indicator"][data-state="loading"],
+[data-slot="progress-indicator"][data-state="complete"] {
+  inline-size: var(--ods-progress-value);
+  margin-inline-end: auto;
+}
+
+[data-slot="progress-indicator"][data-state="indeterminate"] {
+  inline-size: 40%;
+  animation: ods-progress-indeterminate 1.4s var(--ods-motion-easing-standard)
+    infinite;
+}
+
+:dir(rtl) [data-slot="progress-indicator"][data-state="indeterminate"] {
+  animation-name: ods-progress-indeterminate-rtl;
+}
+
+[data-slot="menubar-content"] {
+  min-width: min(14rem, var(--radix-menubar-content-available-width));
+  max-width: min(
+    20rem,
+    calc(100vw - 1rem),
+    var(--radix-menubar-content-available-width)
+  );
+}
+
+[data-slot="menubar-sub-content"] {
+  min-width: min(12rem, var(--radix-menubar-content-available-width));
+  max-width: min(
+    20rem,
+    calc(100vw - 1rem),
+    var(--radix-menubar-content-available-width)
+  );
+}
+
+[data-slot="menubar-content"],
+[data-slot="menubar-sub-content"] {
+  max-height: var(--radix-menubar-content-available-height);
+  transform-origin: var(--radix-menubar-content-transform-origin);
+  will-change: transform, opacity;
+}
+
+[data-slot="menubar-content"][data-state="open"],
+[data-slot="menubar-sub-content"][data-state="open"] {
+  animation-name: ods-menu-in;
+  animation-duration: var(--ods-motion-duration-feedback);
+  animation-timing-function: var(--ods-motion-easing-enter);
+  animation-fill-mode: both;
+}
+
+[data-slot="menubar-content"][data-state="closed"],
+[data-slot="menubar-sub-content"][data-state="closed"] {
+  animation-name: ods-menu-out;
+  animation-duration: var(--ods-motion-duration-exit);
+  animation-timing-function: var(--ods-motion-easing-exit);
+  animation-fill-mode: both;
+}
+
+[data-slot="menubar-direction-icon"] {
+  transition: transform var(--ods-motion-duration-feedback)
+    var(--ods-motion-easing-standard);
+}
+
+:dir(rtl) [data-slot="menubar-direction-icon"] {
+  transform: rotate(180deg);
+}
+
+:dir(rtl) [data-slot="data-table-direction-icon"] {
+  transform: rotate(180deg);
+}
+
+[data-slot="combobox-content"] {
+  animation: ods-menu-in var(--ods-motion-duration-feedback)
+    var(--ods-motion-easing-enter) both;
+  will-change: transform, opacity;
+}
+
+[data-slot="combobox-content"][data-side="bottom"] {
+  transform-origin: top;
+}
+
+[data-slot="combobox-content"][data-side="top"] {
+  transform-origin: bottom;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  [data-slot="skeleton"],
+  [data-slot="skeleton"]::after {
+    animation: none !important;
+  }
+
+  [data-slot="skeleton"]::after {
+    display: none;
+  }
+
+  [data-slot="progress-indicator"][data-state="indeterminate"] {
+    inline-size: 100%;
+    opacity: 0.45;
+    transform: none;
+    animation: none;
+  }
+
+  [data-slot="combobox-content"] {
+    animation: none;
+  }
+}
+
+@keyframes ods-overlay-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes ods-overlay-out {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+@keyframes ods-dialog-sheet-in {
+  from {
+    opacity: 0;
+    transform: translateY(100%);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes ods-dialog-sheet-out {
+  from {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateY(100%);
+  }
+}
+
+@keyframes ods-dialog-modal-in {
+  from {
+    opacity: 0;
+    transform: translate(-50%, -50%) scale(0.97);
+  }
+  to {
+    opacity: 1;
+    transform: translate(-50%, -50%) scale(1);
+  }
+}
+
+@keyframes ods-dialog-modal-out {
+  from {
+    opacity: 1;
+    transform: translate(-50%, -50%) scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: translate(-50%, -50%) scale(0.97);
+  }
+}
+
+@keyframes ods-drawer-in {
+  from {
+    transform: translateX(var(--ods-drawer-motion-offset));
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+
+@keyframes ods-drawer-out {
+  from {
+    transform: translateX(0);
+  }
+  to {
+    transform: translateX(var(--ods-drawer-motion-offset));
+  }
+}
+
+@keyframes ods-collapsible-expand {
+  from {
+    height: 0;
+    opacity: 0;
+  }
+  to {
+    height: var(--radix-collapsible-content-height);
+    opacity: 1;
+  }
+}
+
+@keyframes ods-collapsible-collapse {
+  from {
+    height: var(--radix-collapsible-content-height);
+    opacity: 1;
+  }
+  to {
+    height: 0;
+    opacity: 0;
+  }
+}
+
+@keyframes ods-menu-in {
+  from {
+    opacity: 0;
+    transform: scale(0.97);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes ods-menu-out {
+  from {
+    opacity: 1;
+    transform: scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: scale(0.98);
+  }
+}
+
+@keyframes ods-tabs-content-in {
+  from {
+    opacity: 0.72;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes ods-skeleton-wave {
+  to {
+    transform: translateX(100%);
+  }
+}
+
+@keyframes ods-skeleton-wave-rtl {
+  to {
+    transform: translateX(-100%);
+  }
+}
+
+@keyframes ods-skeleton-pulse {
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.58;
+  }
+}
+
+@keyframes ods-progress-indeterminate {
+  from {
+    transform: translateX(-100%);
+  }
+  to {
+    transform: translateX(250%);
+  }
+}
+
+@keyframes ods-progress-indeterminate-rtl {
+  from {
+    transform: translateX(100%);
+  }
+  to {
+    transform: translateX(-250%);
+  }
+}