@typlog/ui 0.14.0 → 0.16.0

package/addons.css

@@ -1,163 +1,289 @@
 
+@layer components {
 .ui-SocialButton:where(.r-variant-classic) {
-  background-color: var(--social-button-background-color);
-  color: var(--social-button-text-color);
-  box-shadow: 0px 1px 2px 0px #0A0D120D, 0px -2px 0px 0px #0A0D120D inset, 0px 0px 0px 1px #0A0D122E inset;
-  --social-button-background-color: black;
-  --social-button-text-color: white;
-  --social-button-hover-filter: brightness(0.92) saturate(1.1);
+    background-color: var(--social-button-background-color);
+    color: var(--social-button-text-color);
+    box-shadow: 0px 1px 2px 0px #0A0D120D, 0px -2px 0px 0px #0A0D120D inset, 0px 0px 0px 1px #0A0D122E inset;
+    --social-button-background-color: black;
+    --social-button-text-color: white;
+    --social-button-hover-filter: brightness(0.92) saturate(1.1);
 }
 @media (hover: hover) {
 .ui-SocialButton:where(:hover) {
-    filter: var(--social-button-hover-filter);
+      filter: var(--social-button-hover-filter);
 }
 }
 .ui-SocialButton:where(.r-brand-google) {
-  --social-button-background-color: var(--color-background);
-  --social-button-text-color: var(--gray-12);
+    --social-button-background-color: var(--color-background);
+    --social-button-text-color: var(--gray-12);
 }
 .ui-SocialButton:where(.r-brand-facebook) {
-  --social-button-background-color: #1877F2;
+    --social-button-background-color: #1877F2;
 }
 .ui-SocialButton:where(.r-brand-github) {
-  --social-button-background-color: #333;
+    --social-button-background-color: #333;
 }
 .ui-SocialButton:where(.r-variant-classic):where(.r-brand-slack) {
-  --social-button-background-color: #611f69;
+    --social-button-background-color: #611f69;
 }
 .ui-SocialButton:where(.r-variant-classic):where(:focus-visible) {
-  outline: 2px solid var(--focus-8);
-  outline-offset: 2px;
+    outline: 2px solid var(--focus-8);
+    outline-offset: 2px;
 }
 .ui-SocialButton:where(.r-variant-classic):where(:active) {
-  box-shadow: var(--shadow-1);
+    box-shadow: var(--shadow-1);
 }
 .ui-SocialButton:where(.r-variant-classic):where([data-disabled]) {
-  color: var(--gray-a10);
-  background-color: var(--gray-a2);
+    color: var(--gray-a10);
+    background-color: var(--gray-a2);
 }
-
-.ui-IconifySample {
-  display: flex;
-  gap: var(--space-4);
-  padding: var(--space-2);
-  justify-content: space-between;
-  align-items: center;
-  text-align: left;
-  border-radius: var(--radius-3);
-  background: var(--gray-a2);
-}
-.ui-IconifySample:hover {
-  background: var(--gray-a3);
-}
-.ui-IconifySampleInfo {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-1);
-}
-.ui-IconifySampleInfo > strong {
-  font-weight: var(--font-weight-medium);
-  font-size: var(--font-size-2);
-  line-height: var(--line-height-2);
-}
-.ui-IconifySampleInfo > span {
-  font-weight: var(--font-weight-regular);
-  font-size: var(--font-size-1);
-  line-height: var(--line-height-1);
-  color: var(--gray-a10);
-}
-.ui-IconifySampleIcons {
-  display: grid;
-  grid-template-columns: repeat(3, minmax(0, 1fr));
-  gap: var(--space-2);
 }
 
-.ui-IconifyCollection {
-  container-name: icon-collection;
-  container-type: inline-size;
-}
-.ui-IconifyCollectionForm {
-  display: flex;
-  flex-grow: 1;
-  align-items: center;
-  gap: var(--space-4);
-}
-.ui-IconifyCollectionForm .ui-TextField {
-  flex-grow: 1;
-}
-.ui-IconifyCollectionGroupsHead {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: var(--space-8);
-  margin-bottom: var(--space-4);
+@layer components {
+.ui-IconGrid {
+    display: flex;
+    min-width: 0;
+    flex-direction: column;
+    gap: var(--space-3);
+}
+.ui-IconGridHeader {
+    display: flex;
+    gap: var(--space-4);
+    align-items: center;
+}
+.ui-IconGridSearch {
+    width: 100%;
+}
+.ui-IconGridTabs {
+    display: inline-flex;
+    align-self: flex-start;
+    max-width: 100%;
+    overflow-x: auto;
+    padding: 2px;
+    gap: 2px;
+    background: var(--gray-a3);
+    border-radius: var(--radius-3);
+}
+.ui-IconGridTabs button {
+    padding: var(--space-1) var(--space-3);
+    color: var(--gray-a11);
+    font-size: var(--font-size-1);
+    line-height: var(--line-height-1);
+    white-space: nowrap;
+    background: transparent;
+    border: 1px solid transparent;
+    border-radius: var(--radius-2);
+    cursor: pointer;
+}
+.ui-IconGridTabs button:hover,
+  .ui-IconGridTabs button.is-active {
+    color: var(--gray-12);
+    background: var(--color-panel-solid);
+    border-color: var(--gray-a5);
+}
+.ui-IconGridTabs button:focus-visible,
+  .ui-IconGridCell:focus-visible {
+    outline: 2px solid var(--focus-8);
+    outline-offset: 2px;
+}
+.ui-IconGridViewport {
+    position: relative;
+    box-sizing: border-box;
+    min-width: 0;
+    overflow: auto;
+    overscroll-behavior: contain;
+    border-radius: var(--radius-3);
+    outline: none;
+}
+.ui-IconGridViewport:focus-visible {
+    outline: 2px solid var(--focus-8);
+    outline-offset: 2px;
+}
+.ui-IconGridContent {
+    position: relative;
+    width: 100%;
+}
+.ui-IconGridRow {
+    position: absolute;
+    top: 0;
+    left: 0;
+    display: flex;
+    width: 100%;
+    align-items: stretch;
+}
+.ui-IconGridCell {
+    display: grid;
+    flex: 0 0 auto;
+    place-items: center;
+    min-width: 0;
+    height: 100%;
+    padding: var(--space-2);
+    color: var(--gray-12);
+    background: transparent;
+    border: 1px solid transparent;
+    border-radius: var(--radius-3);
+    cursor: pointer;
+}
+.ui-IconGridCell:hover,
+  .ui-IconGridCell[aria-pressed='true'] {
+    background: var(--gray-a3);
+}
+.ui-IconGridMessage {
+    display: grid;
+    height: 100%;
+    min-height: 8rem;
+    place-items: center;
+    padding: var(--space-6);
+    color: var(--gray-a11);
+    text-align: center;
 }
-@container icon-collection (min-width: 768px) {
-.ui-IconifyCollectionGroupsHead {
-    flex-direction: row;
 }
+
+@layer components {
+.ui-IconCollection {
+    container-name: icon-collection;
+    container-type: inline-size;
+    min-width: 0;
+}
+.ui-IconCollectionBrowser {
+    box-sizing: border-box;
+    min-width: 0;
+    overflow: auto;
+    overscroll-behavior: contain;
+    border-radius: var(--radius-3);
+    outline: none;
+}
+.ui-IconCollectionBrowser:focus-visible {
+    outline: 2px solid var(--focus-8);
+    outline-offset: 2px;
+}
+.ui-IconCollectionToolbar {
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    gap: var(--space-4);
+    margin-bottom: var(--space-4);
+}
+.ui-IconCollectionFilter {
+    flex: 1 1 auto;
+}
+.ui-IconCollectionTitle,
+  .ui-IconCollectionGroupTitle {
+    font-weight: var(--font-weight-medium);
+}
+.ui-IconCollectionTitle {
+    font-size: var(--font-size-4);
+    line-height: var(--line-height-4);
+}
+.ui-IconCollectionGroupTitle span:last-child,
+  .ui-IconCollectionInfo span {
+    color: var(--gray-a10);
+    font-size: var(--font-size-1);
+    line-height: var(--line-height-1);
+}
+.ui-IconCollectionGroup {
+    margin-bottom: var(--space-4);
+}
+.ui-IconCollectionGroup:last-child {
+    margin-bottom: 0;
+}
+.ui-IconCollectionGroupTitle {
+    display: flex;
+    align-items: baseline;
+    gap: var(--space-1);
+    margin-bottom: var(--space-2);
+    font-size: var(--font-size-3);
+    line-height: var(--line-height-3);
+}
+.ui-IconCollectionCards {
+    display: grid;
+    grid-template-columns: repeat(1, minmax(0, 1fr));
+    gap: var(--space-2);
+}
+.ui-IconCollectionCard {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--space-3);
+    width: 100%;
+    padding: var(--space-2);
+    color: inherit;
+    text-align: start;
+    background: var(--gray-a2);
+    border: 1px solid transparent;
+    border-radius: var(--radius-3);
+    cursor: pointer;
+}
+.ui-IconCollectionCard:hover {
+    background: var(--gray-a3);
+    border-color: var(--accent-6);
+}
+.ui-IconCollectionCard:focus-visible {
+    outline: 2px solid var(--focus-8);
+    outline-offset: 2px;
+}
+.ui-IconCollectionInfo {
+    display: flex;
+    min-width: 0;
+    flex-direction: column;
+    gap: var(--space-1);
+}
+.ui-IconCollectionInfo strong {
+    overflow: hidden;
+    font-size: var(--font-size-2);
+    line-height: var(--line-height-2);
+    font-weight: var(--font-weight-medium);
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+.ui-IconCollectionSamples {
+    display: grid;
+    flex: none;
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+    gap: var(--space-2);
 }
-.ui-IconifyCollectionGroupsHead > h1 {
-  font-weight: var(--font-weight-medium);
-  font-size: var(--font-size-4);
-  line-height: var(--line-height-4);
+.ui-IconCollectionMessage {
+    display: grid;
+    min-height: 8rem;
+    place-items: center;
+    padding: var(--space-6);
+    color: var(--gray-a11);
+    text-align: center;
 }
-.ui-IconifyCollectionSample {
-  margin-bottom: var(--space-4);
+@container icon-collection (min-width: 768px) {
+.ui-IconCollectionToolbar {
+      flex-direction: row;
+      align-items: center;
 }
-.ui-IconifyCollectionSampleGrid {
-  margin-top: var(--space-2);
-  display: grid;
-  gap: var(--space-2);
-  grid-template-columns: repeat(1, minmax(0, 1fr));
+.ui-IconCollectionFilter {
+      max-width: 28rem;
 }
-@container icon-collection (min-width: 768px) {
-.ui-IconifyCollectionSampleGrid {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
+.ui-IconCollectionCards {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
 }
 }
 @container icon-collection (min-width: 1024px) {
-.ui-IconifyCollectionSampleGrid {
-    grid-template-columns: repeat(3, minmax(0, 1fr));
+.ui-IconCollectionCards {
+      grid-template-columns: repeat(3, minmax(0, 1fr));
 }
 }
 @container icon-collection (min-width: 1280px) {
-.ui-IconifyCollectionSampleGrid {
-    grid-template-columns: repeat(4, minmax(0, 1fr));
-}
-}
-.ui-IconifyCollectionSuffixes {
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--space-2);
-  flex-grow: 1;
-  margin-top: var(--space-4);
+.ui-IconCollectionCards {
+      grid-template-columns: repeat(4, minmax(0, 1fr));
 }
-.ui-IconifyCollectionIconGrid {
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--space-3);
-  flex-grow: 1;
-  margin-top: var(--space-4);
-  margin-bottom: var(--space-4);
 }
-.ui-IconifyCollectionIconGrid button {
-  border: 0;
-  padding: var(--space-2);
-  border-radius: max(var(--radius-2), var(--radius-full));
-}
-.ui-IconifyCollectionIconGrid button:hover {
-  background-color: var(--gray-a4);
 }
 
+@layer components {
 .ui-Turnstile {
-  background: var(--gray-a3);
+    background: var(--gray-a3);
 }
 .ui-Turnstile:where(.r-size-normal) {
-  width: 300px;
-  height: 65px;
+    width: 300px;
+    height: 65px;
 }
 .ui-Turnstile:where(.r-size-compact) {
-  width: 150px;
-  height: 140px;
+    width: 150px;
+    height: 140px;
+}
 }

package/addons.d.ts

@@ -6,7 +6,84 @@ import { DefineComponent } from 'vue';
 import { PrimitiveProps } from 'reka-ui';
 import { PublicProps } from 'vue';
 
-declare type __VLS_WithTemplateSlots<T, S> = T & {
+declare const __VLS_export: __VLS_WithSlots< DefineComponent<SocialButtonProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<SocialButtonProps> & Readonly<{}>, {
+    as: AsTag | Component;
+    size: "1" | "2" | "3" | "4";
+    variant: "classic" | "solid" | "soft" | "surface" | "outline";
+}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>, {
+    default?: (props: {}) => any;
+}>;
+
+declare const __VLS_export_2: DefineComponent<IconCollectionProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
+    select: (icon: string) => any;
+    "update:modelValue": (icon: string) => any;
+    "update:query": (query: string) => any;
+    "update:collection": (prefix: string) => any;
+    "update:filter": (filter: string) => any;
+}, string, PublicProps, Readonly<IconCollectionProps> & Readonly<{
+    onSelect?: ((icon: string) => any) | undefined;
+    "onUpdate:modelValue"?: ((icon: string) => any) | undefined;
+    "onUpdate:query"?: ((query: string) => any) | undefined;
+    "onUpdate:collection"?: ((prefix: string) => any) | undefined;
+    "onUpdate:filter"?: ((filter: string) => any) | undefined;
+}>, {
+    filter: string;
+    overscan: number;
+    height: string | number;
+    query: string;
+    iconSize: string | number;
+    cellSize: number;
+    collection: string;
+}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
+
+declare const __VLS_export_3: __VLS_WithSlots_2< DefineComponent<IconGridProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
+    select: (icon: string) => any;
+    "update:modelValue": (icon: string) => any;
+    "update:query": (query: string) => any;
+    "update:activeCollection": (prefix: string) => any;
+}, string, PublicProps, Readonly<IconGridProps> & Readonly<{
+    onSelect?: ((icon: string) => any) | undefined;
+    "onUpdate:modelValue"?: ((icon: string) => any) | undefined;
+    "onUpdate:query"?: ((query: string) => any) | undefined;
+    "onUpdate:activeCollection"?: ((prefix: string) => any) | undefined;
+}>, {
+    overscan: number;
+    height: string | number;
+    collections: string[];
+    query: string;
+    activeCollection: string;
+    iconSize: string | number;
+    cellSize: number;
+}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>, {
+    'header-leading'?: (props: {}) => any;
+} & {
+    'header-search'?: (props: {}) => any;
+}>;
+
+declare const __VLS_export_4: DefineComponent<TurnstileProps, {
+    render: () => Promise<void>;
+    reset: () => void;
+    remove: () => void;
+}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
+    "update:modelValue": (args_0: string) => any;
+}, string, PublicProps, Readonly<TurnstileProps> & Readonly<{
+    "onUpdate:modelValue"?: ((args_0: string) => any) | undefined;
+}>, {
+    size: "normal" | "compact";
+    theme: "light" | "dark" | "auto";
+    action: string;
+    resetInterval: number;
+    appearance: "always" | "execute" | "interaction-only";
+    renderOnMount: boolean;
+}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
+
+declare type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+
+declare type __VLS_WithSlots_2<T, S> = T & {
     new (): {
         $slots: S;
     };
@@ -14,31 +91,120 @@ declare type __VLS_WithTemplateSlots<T, S> = T & {
 
 declare type BrandType = 'google' | 'facebook' | 'x' | 'github' | 'apple' | 'slack' | 'figma';
 
-export declare const IconifyCollection: DefineComponent<IconifyCollectionProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
-select: (icon: string) => any;
-}, string, PublicProps, Readonly<IconifyCollectionProps> & Readonly<{
-onSelect?: ((icon: string) => any) | undefined;
-}>, {
-perpage: number;
-iconSize: string | number;
-}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
+export declare const IconCollection: typeof __VLS_export_2;
 
-export declare interface IconifyCollectionProps {
-    prefix?: string;
-    search?: string;
-    perpage?: number;
+export declare interface IconCollectionEmits {
+    (event: 'update:modelValue', icon: string): void;
+    (event: 'update:collection', prefix: string): void;
+    (event: 'update:query', query: string): void;
+    (event: 'update:filter', filter: string): void;
+    (event: 'select', icon: string): void;
+}
+
+export declare interface IconCollectionProps {
+    /** The selected icon name, such as `lucide:heart`. */
+    modelValue?: string;
+    /** The current icon set prefix. An empty value displays the collection catalog. */
+    collection?: string;
+    /** The current search query within the selected icon set. */
+    query?: string;
+    /** The current collection catalog filter. */
+    filter?: string;
+    /** Size of each rendered icon. @default 20 */
     iconSize?: string | number;
+    /** Width and height of each icon button. @default 40 */
+    cellSize?: number;
+    /** Height of the catalog or icon grid scroll viewport. @default 420 */
+    height?: string | number;
+    /** Number of extra icon rows rendered outside the viewport. @default 4 */
+    overscan?: number;
+    /** Classes for the component's stable visual parts. */
+    ui?: IconCollectionUI;
+}
+
+export declare interface IconCollectionUI {
+    base?: string;
+    browser?: string;
+    toolbar?: string;
+    title?: string;
+    filter?: string;
+    groups?: string;
+    group?: string;
+    groupTitle?: string;
+    cards?: string;
+    card?: string;
+    info?: string;
+    samples?: string;
+    message?: string;
+    back?: string;
+    grid?: IconGridUI;
+}
+
+export declare const IconGrid: typeof __VLS_export_3;
+
+export declare interface IconGridEmits {
+    (event: 'update:modelValue', icon: string): void;
+    (event: 'update:query', query: string): void;
+    (event: 'update:activeCollection', prefix: string): void;
+    (event: 'select', icon: string): void;
+}
+
+export declare interface IconGridProps {
+    /** Iconify collection prefixes to display. */
+    collections?: string[];
+    /** The selected icon name, such as `lucide:heart`. */
+    modelValue?: string;
+    /** The current icon search query. */
+    query?: string;
+    /** Active collection prefix; an empty value displays all collections. */
+    activeCollection?: string;
+    /** Size of each rendered icon. @default 20 */
+    iconSize?: string | number;
+    /** Width and height of each icon button. @default 40 */
+    cellSize?: number;
+    /** Height of the scroll viewport. @default 420 */
+    height?: string | number;
+    /** Classes for the component's stable visual parts. */
+    ui?: IconGridUI;
+    /** Number of extra rows rendered outside the viewport. @default 4 */
+    overscan?: number;
+}
+
+export declare interface IconGridUI {
+    base?: string;
+    header?: string;
+    search?: string;
+    tabs?: string;
+    tab?: string;
+    viewport?: string;
+    content?: string;
+    cell?: string;
+    message?: string;
+}
+
+export declare interface IconifyCollectionGroup {
+    category: string;
+    items: IconifyCollectionItem[];
+}
+
+export declare interface IconifyCollectionItem {
+    prefix: string;
+    category: string;
+    name: string;
+    samples: string[];
+    total: number;
+    license?: {
+        title: string;
+        spdx?: string;
+        url?: string;
+    };
+    hidden?: boolean;
+    [key: string]: unknown;
 }
 
 declare type RadiusType = 'none' | 'small' | 'medium' | 'large' | 'full';
 
-export declare const SocialButton: __VLS_WithTemplateSlots<DefineComponent<SocialButtonProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<SocialButtonProps> & Readonly<{}>, {
-as: AsTag | Component;
-size: "1" | "2" | "3" | "4";
-variant: "classic" | "solid" | "soft" | "surface" | "outline";
-}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>, {
-    default?(_: {}): any;
-}>;
+export declare const SocialButton: typeof __VLS_export;
 
 export declare interface SocialButtonProps extends PrimitiveProps {
     brand: BrandType;
@@ -52,20 +218,7 @@ export declare interface SocialButtonProps extends PrimitiveProps {
     disabled?: boolean;
 }
 
-export declare const Turnstile: DefineComponent<TurnstileProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
-"update:modelValue": (args_0: string) => any;
-}, string, PublicProps, Readonly<TurnstileProps> & Readonly<{
-"onUpdate:modelValue"?: ((args_0: string) => any) | undefined;
-}>, {
-size: "normal" | "compact";
-theme: "light" | "dark" | "auto";
-action: string;
-resetInterval: number;
-appearance: "always" | "execute" | "interaction-only";
-renderOnMount: boolean;
-}, {}, {}, {}, string, ComponentProvideOptions, false, {
-element: HTMLDivElement;
-}, HTMLDivElement>;
+export declare const Turnstile: typeof __VLS_export_4;
 
 export declare interface TurnstileProps {
     sitekey: string;
@@ -79,3 +232,11 @@ export declare interface TurnstileProps {
 }
 
 export { }
+
+
+declare global {
+    interface Window {
+        turnstile?: TurnstileApi;
+        cfTurnstileOnLoad?: () => void;
+    }
+}