50:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 51:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 52:T1430,'use client'; import * as React from 'react'; import { motion } from 'motion/react'; import { DataTable, type DataTableColumn } from '@/components/spectrumui/data-table'; interface Flag { id: string; name: string; key: string; envs: string[]; rollout: number; updated: string; defaultOn: boolean; } const FLAGS: Flag[] = [ { id: 'f1', name: 'New onboarding flow', key: 'onboarding_v3', envs: ['Production', 'Staging'], rollout: 100, updated: '2 hours ago', defaultOn: true, }, { id: 'f2', name: 'Usage-based billing', key: 'metered_billing', envs: ['Staging'], rollout: 25, updated: 'Yesterday', defaultOn: true, }, { id: 'f3', name: 'AI summaries', key: 'ai_summaries', envs: ['Production', 'Staging'], rollout: 50, updated: '3 days ago', defaultOn: true, }, { id: 'f4', name: 'Command palette v2', key: 'cmdk_v2', envs: ['Staging'], rollout: 10, updated: 'Sep 4', defaultOn: false, }, { id: 'f5', name: 'Legacy export path', key: 'legacy_export', envs: ['Production'], rollout: 100, updated: 'Aug 18', defaultOn: false, }, ]; function Toggle({ on, onChange, label, }: { on: boolean; onChange: (next: boolean) => void; label: string; }) { return ( ); } export function FeatureFlagsTable({ variant = 'Comfortable', }: { variant?: 'Comfortable' | 'Compact'; }) { const [enabled, setEnabled] = React.useState>(() => Object.fromEntries(FLAGS.map((flag) => [flag.id, flag.defaultOn])), ); const columns = React.useMemo[]>( () => [ { id: 'name', header: 'Flag', sortable: true, value: (row) => row.name, cell: (row) => ( {row.name} {row.key} ), }, { id: 'envs', header: 'Environments', hideBelow: 'sm', value: (row) => row.envs.join(' '), cell: (row) => ( {row.envs.map((env) => ( {env} ))} ), }, { id: 'rollout', header: 'Rollout', sortable: true, numeric: true, value: (row) => row.rollout, cell: (row) => ( ), }, { id: 'updated', header: 'Updated', hideBelow: 'md', value: (row) => row.updated }, { id: 'toggle', header: 'Enabled', align: 'end', value: (row) => (enabled[row.id] ? 'on' : 'off'), cell: (row) => ( setEnabled((state) => ({ ...state, [row.id]: next }))} label={`${enabled[row.id] ? 'Disable' : 'Enable'} ${row.name}`} /> ), }, ], [enabled], ); return (

row.id} rowLabel={(row) => row.name} caption="Feature flags with environment coverage, rollout percentage and a live toggle." density={variant === 'Compact' ? 'compact' : 'default'} title="Feature flags" />

); } 4f:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[null,["$","$L50",null,{"namespace":"@spectrumui","registryDependencies":["@spectrumui/data-table"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"components/spectrumui/blocks/tables/feature-flags-table.tsx","content":"$52","type":"registry:block","target":"components/spectrumui/blocks/tables/feature-flags-table.tsx"}],"className":"h-[70svh] min-h-80"}]]}]