@fragments-sdk/ui 0.9.0 → 0.9.2

package/dist/assets/components/Avatar/Avatar.module.css

@@ -0,0 +1,109 @@
+._avatar_uw9aa_1 {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  overflow: hidden;
+  border-radius: var(--fui-radius-full, 9999px);
+  background-color: var(--fui-bg-tertiary, #f4f4f5);
+  color: var(--fui-text-secondary, #52525b);
+  font-family: var(--fui-font-sans, "Geist Sans", "Geist", Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
+  user-select: none;
+}
+
+._square_uw9aa_15 {
+  border-radius: var(--fui-radius-md, 0.429rem);
+}
+
+._xs_uw9aa_19 {
+  width: 1.5rem;
+  height: 1.5rem;
+  font-size: var(--fui-font-size-2xs, 0.714rem);
+}
+
+._sm_uw9aa_25 {
+  width: 2rem;
+  height: 2rem;
+  font-size: var(--fui-font-size-xs, 0.857rem);
+}
+
+._md_uw9aa_31 {
+  width: 2.5rem;
+  height: 2.5rem;
+  font-size: var(--fui-font-size-sm, 1rem);
+}
+
+._lg_uw9aa_37 {
+  width: 3rem;
+  height: 3rem;
+  font-size: var(--fui-font-size-base, 1.143rem);
+}
+
+._xl_uw9aa_43 {
+  width: 4rem;
+  height: 4rem;
+  font-size: var(--fui-font-size-lg, 1.286rem);
+}
+
+._image_uw9aa_49 {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+._initials_uw9aa_55 {
+  font-weight: var(--fui-font-weight-medium, 500);
+  color: var(--avatar-initials-color, var(--fui-text-inverse, #f4f4f5));
+  text-transform: uppercase;
+  line-height: 1;
+}
+
+._fallbackIcon_uw9aa_62 {
+  width: 60%;
+  height: 60%;
+  color: var(--fui-text-tertiary, #71717a);
+}
+
+._group_uw9aa_68 {
+  display: inline-flex;
+  flex-direction: row-reverse;
+  justify-content: flex-end;
+}
+
+._groupItem_uw9aa_74 {
+  margin-left: -0.5rem;
+  border: 2px solid var(--fui-bg-primary, #ffffff);
+}
+._groupItem_uw9aa_74:last-child {
+  margin-left: 0;
+}
+
+._group_uw9aa_68 ._xs_uw9aa_19._groupItem_uw9aa_74 {
+  margin-left: -0.375rem;
+}
+
+._group_uw9aa_68 ._sm_uw9aa_25._groupItem_uw9aa_74 {
+  margin-left: -0.5rem;
+}
+
+._group_uw9aa_68 ._md_uw9aa_31._groupItem_uw9aa_74 {
+  margin-left: -0.625rem;
+}
+
+._group_uw9aa_68 ._lg_uw9aa_37._groupItem_uw9aa_74 {
+  margin-left: -0.75rem;
+}
+
+._group_uw9aa_68 ._xl_uw9aa_43._groupItem_uw9aa_74 {
+  margin-left: -1rem;
+}
+
+._overflow_uw9aa_102 {
+  margin-left: -0.625rem;
+  background-color: var(--fui-bg-tertiary, #f4f4f5);
+  border: 2px solid var(--fui-bg-primary, #ffffff);
+}
+._overflow_uw9aa_102 ._initials_uw9aa_55 {
+  color: var(--fui-text-secondary, #52525b);
+}

package/dist/assets/components/Badge/Badge.module.css

@@ -0,0 +1,117 @@
+._badge_ip4yb_1 {
+  display: inline-flex;
+  align-items: center;
+  width: max-content;
+  gap: var(--fui-space-1, 0.5rem);
+  border-radius: var(--fui-radius-full, 9999px);
+  font-family: var(--fui-font-sans, "Geist Sans", "Geist", Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
+  font-weight: var(--fui-font-weight-medium, 500);
+  line-height: 1;
+  white-space: nowrap;
+}
+
+._sm_ip4yb_13 {
+  padding: var(--fui-space-0-5, 0.15rem) var(--fui-space-1, 0.5rem);
+  font-size: var(--fui-font-size-2xs, 0.714rem);
+}
+
+._md_ip4yb_18 {
+  padding: var(--fui-space-1, 0.5rem) var(--fui-space-1, 0.5rem);
+  font-size: var(--fui-font-size-xs, 0.857rem);
+}
+
+._lg_ip4yb_23 {
+  padding: var(--fui-space-1, 0.5rem) var(--fui-space-2, 1rem);
+  font-size: var(--fui-font-size-sm, 1rem);
+}
+
+._default_ip4yb_28 {
+  background-color: var(--fui-bg-tertiary, #f4f4f5);
+  color: var(--fui-text-secondary, #52525b);
+}
+
+._success_ip4yb_33 {
+  background-color: var(--fui-color-success-bg, rgba(34, 197, 94, 0.1));
+  color: var(--fui-color-success-text, rgb(18.987012987, 110.012987013, 52.4935064935));
+}
+
+._warning_ip4yb_38 {
+  background-color: var(--fui-color-warning-bg, rgba(245, 158, 11, 0.1));
+  color: var(--fui-color-warning-text, rgb(128.3401574803, 82.5795275591, 5.2598425197));
+}
+
+._error_ip4yb_43 {
+  background-color: var(--fui-color-danger-bg, rgba(239, 68, 68, 0.1));
+  color: var(--fui-color-danger-text, rgb(198.2384236453, 16.9615763547, 16.9615763547));
+}
+
+._info_ip4yb_48 {
+  background-color: var(--fui-color-info-bg, rgba(59, 130, 246, 0.1));
+  color: var(--fui-color-info-text, rgb(9.807804878, 87.1804878049, 213.592195122));
+}
+
+._outline_ip4yb_53 {
+  background-color: transparent;
+  color: var(--fui-text-primary, #18181b);
+  border: 1px solid var(--fui-border-strong, rgba(0, 0, 0, 0.14));
+}
+
+._dot_ip4yb_59 {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background-color: currentColor;
+}
+._sm_ip4yb_13 ._dot_ip4yb_59 {
+  width: 5px;
+  height: 5px;
+}
+
+._icon_ip4yb_70 {
+  display: flex;
+  align-items: center;
+}
+
+._remove_ip4yb_75 {
+  appearance: none;
+  background: transparent;
+  border: none;
+  padding: 0;
+  margin: 0;
+  font: inherit;
+  color: inherit;
+  cursor: pointer;
+}
+._remove_ip4yb_75:disabled {
+  cursor: not-allowed;
+}
+._remove_ip4yb_75 {
+  transition: background-color var(--fui-transition-fast, 150ms ease), border-color var(--fui-transition-fast, 150ms ease), box-shadow var(--fui-transition-fast, 150ms ease), opacity var(--fui-transition-fast, 150ms ease);
+}
+._remove_ip4yb_75:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 var(--fui-focus-ring-offset, 2px) var(--fui-bg-primary, #ffffff), 0 0 0 calc(var(--fui-focus-ring-offset, 2px) + var(--fui-focus-ring-width, 2px)) var(--fui-focus-ring-color, #18181b);
+}
+._remove_ip4yb_75:disabled, ._remove_ip4yb_75[data-disabled] {
+  opacity: 0.5;
+  pointer-events: none;
+}
+._remove_ip4yb_75 {
+  min-width: var(--fui-target-size-min, 1.714rem);
+  min-height: var(--fui-target-size-min, 1.714rem);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 var(--fui-space-0-5, 0.15rem);
+  font-size: var(--fui-font-size-sm, 1rem);
+  color: inherit;
+  opacity: 0.6;
+  line-height: 1;
+  border-radius: var(--fui-space-0-5, 0.15rem);
+}
+._sm_ip4yb_13 ._remove_ip4yb_75 {
+  font-size: var(--fui-font-size-xs, 0.857rem);
+}
+._remove_ip4yb_75:hover {
+  opacity: 1;
+}

package/dist/assets/components/BentoGrid/BentoGrid.module.css

@@ -0,0 +1,113 @@
+._grid_5fm9r_1 {
+  display: grid;
+  width: 100%;
+  grid-auto-flow: dense;
+}
+
+._columns2_5fm9r_7 {
+  grid-template-columns: repeat(2, 1fr);
+}
+
+._columns3_5fm9r_11 {
+  grid-template-columns: repeat(3, 1fr);
+}
+
+._columns4_5fm9r_15 {
+  grid-template-columns: repeat(4, 1fr);
+}
+
+@media (max-width: 1023px) {
+  ._columns3_5fm9r_11,
+  ._columns4_5fm9r_15 {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+@media (max-width: 639px) {
+  ._columns2_5fm9r_7,
+  ._columns3_5fm9r_11,
+  ._columns4_5fm9r_15 {
+    grid-template-columns: 1fr;
+  }
+}
+._gapNone_5fm9r_32 {
+  gap: 0;
+}
+
+._gapXs_5fm9r_36 {
+  gap: var(--fui-space-1, 0.5rem);
+}
+
+._gapSm_5fm9r_40 {
+  gap: var(--fui-space-2, 1rem);
+}
+
+._gapMd_5fm9r_44 {
+  gap: var(--fui-space-4, 2rem);
+}
+
+._gapLg_5fm9r_48 {
+  gap: var(--fui-space-6, 3rem);
+}
+
+._gapXl_5fm9r_52 {
+  gap: var(--fui-space-8, 4rem);
+}
+
+._item_5fm9r_56 {
+  background-color: var(--fui-bg-elevated, #ffffff);
+  border: 1px solid var(--fui-border, rgba(0, 0, 0, 0.08));
+  border-radius: var(--fui-radius-lg, 0.571rem);
+  min-width: 0;
+  padding: var(--fui-padding-container-md, 2rem);
+  transition: box-shadow var(--fui-transition-fast, 150ms ease), border-color var(--fui-transition-fast, 150ms ease), transform var(--fui-transition-fast, 150ms ease);
+}
+._item_5fm9r_56:hover {
+  border-color: var(--fui-border-strong, rgba(0, 0, 0, 0.14));
+  box-shadow: var(--fui-shadow-md, 0 2px 4px -1px rgba(0, 0, 0, 0.06), 0 1px 3px -2px rgba(0, 0, 0, 0.04));
+  transform: translateY(-2px);
+}
+._item_5fm9r_56 {
+  --_col-span: var(--bento-col-span, 1);
+  --_row-span: var(--bento-row-span, 1);
+  grid-column: span var(--_col-span);
+  grid-row: span var(--_row-span);
+}
+@media (min-width: 640px) {
+  ._item_5fm9r_56 {
+    --_col-span: var(--bento-col-span-sm, var(--bento-col-span, 1));
+    --_row-span: var(--bento-row-span-sm, var(--bento-row-span, 1));
+  }
+}
+@media (min-width: 768px) {
+  ._item_5fm9r_56 {
+    --_col-span: var(--bento-col-span-md, var(--bento-col-span-sm, var(--bento-col-span, 1)));
+    --_row-span: var(--bento-row-span-md, var(--bento-row-span-sm, var(--bento-row-span, 1)));
+  }
+}
+@media (min-width: 1024px) {
+  ._item_5fm9r_56 {
+    --_col-span: var(--bento-col-span-lg, var(--bento-col-span-md, var(--bento-col-span-sm, var(--bento-col-span, 1))));
+    --_row-span: var(--bento-row-span-lg, var(--bento-row-span-md, var(--bento-row-span-sm, var(--bento-row-span, 1))));
+  }
+}
+@media (min-width: 1280px) {
+  ._item_5fm9r_56 {
+    --_col-span: var(--bento-col-span-xl, var(--bento-col-span-lg, var(--bento-col-span-md, var(--bento-col-span-sm, var(--bento-col-span, 1)))));
+    --_row-span: var(--bento-row-span-xl, var(--bento-row-span-lg, var(--bento-row-span-md, var(--bento-row-span-sm, var(--bento-row-span, 1)))));
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  ._item_5fm9r_56 {
+    transition: none;
+  }
+  ._item_5fm9r_56:hover {
+    transform: none;
+  }
+}
+@media (prefers-contrast: more) {
+  ._item_5fm9r_56 {
+    border-width: 2px;
+    border-color: var(--fui-text-primary, #18181b);
+  }
+}

package/dist/assets/components/Box/Box.module.css

@@ -0,0 +1,341 @@
+._box_18cnf_1 {
+  box-sizing: border-box;
+}
+
+._p-none_18cnf_5 {
+  padding: 0;
+}
+
+._p-xs_18cnf_9 {
+  padding: var(--fui-space-1, 0.5rem);
+}
+
+._p-sm_18cnf_13 {
+  padding: var(--fui-space-2, 1rem);
+}
+
+._p-md_18cnf_17 {
+  padding: var(--fui-space-4, 2rem);
+}
+
+._p-lg_18cnf_21 {
+  padding: var(--fui-space-6, 3rem);
+}
+
+._p-xl_18cnf_25 {
+  padding: var(--fui-space-8, 4rem);
+}
+
+._px-none_18cnf_29 {
+  padding-left: 0;
+  padding-right: 0;
+}
+
+._px-xs_18cnf_34 {
+  padding-left: var(--fui-space-1, 0.5rem);
+  padding-right: var(--fui-space-1, 0.5rem);
+}
+
+._px-sm_18cnf_39 {
+  padding-left: var(--fui-space-2, 1rem);
+  padding-right: var(--fui-space-2, 1rem);
+}
+
+._px-md_18cnf_44 {
+  padding-left: var(--fui-space-4, 2rem);
+  padding-right: var(--fui-space-4, 2rem);
+}
+
+._px-lg_18cnf_49 {
+  padding-left: var(--fui-space-6, 3rem);
+  padding-right: var(--fui-space-6, 3rem);
+}
+
+._px-xl_18cnf_54 {
+  padding-left: var(--fui-space-8, 4rem);
+  padding-right: var(--fui-space-8, 4rem);
+}
+
+._py-none_18cnf_59 {
+  padding-top: 0;
+  padding-bottom: 0;
+}
+
+._py-xs_18cnf_64 {
+  padding-top: var(--fui-space-1, 0.5rem);
+  padding-bottom: var(--fui-space-1, 0.5rem);
+}
+
+._py-sm_18cnf_69 {
+  padding-top: var(--fui-space-2, 1rem);
+  padding-bottom: var(--fui-space-2, 1rem);
+}
+
+._py-md_18cnf_74 {
+  padding-top: var(--fui-space-4, 2rem);
+  padding-bottom: var(--fui-space-4, 2rem);
+}
+
+._py-lg_18cnf_79 {
+  padding-top: var(--fui-space-6, 3rem);
+  padding-bottom: var(--fui-space-6, 3rem);
+}
+
+._py-xl_18cnf_84 {
+  padding-top: var(--fui-space-8, 4rem);
+  padding-bottom: var(--fui-space-8, 4rem);
+}
+
+._m-none_18cnf_89 {
+  margin: 0;
+}
+
+._m-xs_18cnf_93 {
+  margin: var(--fui-space-1, 0.5rem);
+}
+
+._m-sm_18cnf_97 {
+  margin: var(--fui-space-2, 1rem);
+}
+
+._m-md_18cnf_101 {
+  margin: var(--fui-space-4, 2rem);
+}
+
+._m-lg_18cnf_105 {
+  margin: var(--fui-space-6, 3rem);
+}
+
+._m-xl_18cnf_109 {
+  margin: var(--fui-space-8, 4rem);
+}
+
+._m-auto_18cnf_113 {
+  margin: auto;
+}
+
+._mx-none_18cnf_117 {
+  margin-left: 0;
+  margin-right: 0;
+}
+
+._mx-xs_18cnf_122 {
+  margin-left: var(--fui-space-1, 0.5rem);
+  margin-right: var(--fui-space-1, 0.5rem);
+}
+
+._mx-sm_18cnf_127 {
+  margin-left: var(--fui-space-2, 1rem);
+  margin-right: var(--fui-space-2, 1rem);
+}
+
+._mx-md_18cnf_132 {
+  margin-left: var(--fui-space-4, 2rem);
+  margin-right: var(--fui-space-4, 2rem);
+}
+
+._mx-lg_18cnf_137 {
+  margin-left: var(--fui-space-6, 3rem);
+  margin-right: var(--fui-space-6, 3rem);
+}
+
+._mx-xl_18cnf_142 {
+  margin-left: var(--fui-space-8, 4rem);
+  margin-right: var(--fui-space-8, 4rem);
+}
+
+._mx-auto_18cnf_147 {
+  margin-left: auto;
+  margin-right: auto;
+}
+
+._my-none_18cnf_152 {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+._my-xs_18cnf_157 {
+  margin-top: var(--fui-space-1, 0.5rem);
+  margin-bottom: var(--fui-space-1, 0.5rem);
+}
+
+._my-sm_18cnf_162 {
+  margin-top: var(--fui-space-2, 1rem);
+  margin-bottom: var(--fui-space-2, 1rem);
+}
+
+._my-md_18cnf_167 {
+  margin-top: var(--fui-space-4, 2rem);
+  margin-bottom: var(--fui-space-4, 2rem);
+}
+
+._my-lg_18cnf_172 {
+  margin-top: var(--fui-space-6, 3rem);
+  margin-bottom: var(--fui-space-6, 3rem);
+}
+
+._my-xl_18cnf_177 {
+  margin-top: var(--fui-space-8, 4rem);
+  margin-bottom: var(--fui-space-8, 4rem);
+}
+
+._my-auto_18cnf_182 {
+  margin-top: auto;
+  margin-bottom: auto;
+}
+
+._bg-none_18cnf_187 {
+  background-color: transparent;
+}
+
+._bg-primary_18cnf_191 {
+  background-color: var(--fui-bg-primary, #ffffff);
+}
+
+._bg-secondary_18cnf_195 {
+  background-color: var(--fui-bg-secondary, #f4f4f5);
+}
+
+._bg-tertiary_18cnf_199 {
+  background-color: var(--fui-bg-tertiary, #f4f4f5);
+}
+
+._bg-elevated_18cnf_203 {
+  background-color: var(--fui-bg-elevated, #ffffff);
+}
+
+._rounded-none_18cnf_207 {
+  border-radius: 0;
+}
+
+._rounded-sm_18cnf_211 {
+  border-radius: var(--fui-radius-sm, 0.25rem);
+}
+
+._rounded-md_18cnf_215 {
+  border-radius: var(--fui-radius-md, 0.429rem);
+}
+
+._rounded-lg_18cnf_219 {
+  border-radius: var(--fui-radius-lg, 0.571rem);
+}
+
+._rounded-full_18cnf_223 {
+  border-radius: var(--fui-radius-full, 9999px);
+}
+
+._border_18cnf_227 {
+  border: 1px solid var(--fui-border, rgba(0, 0, 0, 0.08));
+}
+
+._borderTop_18cnf_231 {
+  border-top: 1px solid var(--fui-border, rgba(0, 0, 0, 0.08));
+}
+
+._borderBottom_18cnf_235 {
+  border-bottom: 1px solid var(--fui-border, rgba(0, 0, 0, 0.08));
+}
+
+._borderLeft_18cnf_239 {
+  border-left: 1px solid var(--fui-border, rgba(0, 0, 0, 0.08));
+}
+
+._borderRight_18cnf_243 {
+  border-right: 1px solid var(--fui-border, rgba(0, 0, 0, 0.08));
+}
+
+._borderColor-default_18cnf_247 {
+  border-color: var(--fui-border-default, rgba(0, 0, 0, 0.08));
+}
+
+._borderColor-strong_18cnf_251 {
+  border-color: var(--fui-border-strong, rgba(0, 0, 0, 0.14));
+}
+
+._borderColor-accent_18cnf_255 {
+  border-color: var(--fui-color-accent, #18181b);
+}
+
+._borderColor-danger_18cnf_259 {
+  border-color: var(--fui-color-danger, #ef4444);
+}
+
+._shadow-sm_18cnf_263 {
+  box-shadow: var(--fui-shadow-sm, 0 1px 2px 0 rgba(0, 0, 0, 0.03));
+}
+
+._shadow-md_18cnf_267 {
+  box-shadow: var(--fui-shadow-md, 0 2px 4px -1px rgba(0, 0, 0, 0.06), 0 1px 3px -2px rgba(0, 0, 0, 0.04));
+}
+
+._shadow-lg_18cnf_271 {
+  box-shadow: var(--fui-shadow-lg, 0 8px 12px -3px rgba(0, 0, 0, 0.08), 0 3px 5px -4px rgba(0, 0, 0, 0.05));
+}
+
+._shadow-none_18cnf_275 {
+  box-shadow: none;
+}
+
+._overflow-hidden_18cnf_279 {
+  overflow: hidden;
+}
+
+._overflow-auto_18cnf_283 {
+  overflow: auto;
+}
+
+._overflow-scroll_18cnf_287 {
+  overflow: scroll;
+}
+
+._overflow-visible_18cnf_291 {
+  overflow: visible;
+}
+
+._color-primary_18cnf_295 {
+  color: var(--fui-text-primary, #18181b);
+}
+
+._color-secondary_18cnf_299 {
+  color: var(--fui-text-secondary, #52525b);
+}
+
+._color-tertiary_18cnf_303 {
+  color: var(--fui-text-tertiary, #71717a);
+}
+
+._color-accent_18cnf_307 {
+  color: var(--fui-color-accent, #18181b);
+}
+
+._color-inverse_18cnf_311 {
+  color: var(--fui-text-inverse, #f4f4f5);
+}
+
+._display-block_18cnf_315 {
+  display: block;
+}
+
+._display-inline_18cnf_319 {
+  display: inline;
+}
+
+._display-inline-block_18cnf_323 {
+  display: inline-block;
+}
+
+._display-flex_18cnf_327 {
+  display: flex;
+}
+
+._display-inline-flex_18cnf_331 {
+  display: inline-flex;
+}
+
+._display-grid_18cnf_335 {
+  display: grid;
+}
+
+._display-none_18cnf_339 {
+  display: none;
+}